css浮动与清除浮动

html-css013

css浮动与清除浮动,第1张

css浮动(float:none | left | right)在网页布局中我们经常使用的属性,也是经常会出现Bug的地方。

首先我们要搞清楚为什么要用到float呢?

网页布局中块级元素,在页面中独占一行,自上而下排列,也就是传说中的文档流。

可是我们要实现左右模块该怎么实现,这就需要用到float了,当我把第三个设置左浮动

然后我们在测试第四个也设置左浮动

下面我将第二个和第四个右浮动

我们在测试将第三个浮动取消

可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决?

这个时候就需要我们清除浮动(clear:both | left | right)

上面的例子 希望第三个左浮动,第二个和第四个右浮动,第五个不受影响在最下面。

在CSS中使用float指定浮动属性值,该属性的值指出了对象是否及如何浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中,所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法:float:none | left | right1、float取值none: 设置对象不浮动,默认值left: 设置对象浮在左边right: 设置对象浮在右边2、float的特性a)、浮动元素会从标准流中脱离b)、浮动元素会触发BFC(块级元素格式化)、不影响外边距折叠c)、 float元素会变成块标签如果float不是none,当display:inline-table时,display的计算值为table;当display:inline | inline-block | run-in | table-* 系时,display的计算值为block,其它情况为指定值。float在绝对定位和display为none时不生效: 当display为none时元素会隐藏,所以float意义不大;当position为absolute绝对定位时元素也将从标准流中脱离,元素使用偏移量移动,float特性无效。浮动元素间会堆叠: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素不能溢出包含块: 浮动元素在包含块内,当包含块的宽度不足以容下浮动的子元素时,将自动折行;垂直方向当包含块认为浮动的子元素没有高度时,子元素会溢出,BFC能解决该问题。水平方向不会溢出,垂直方向有可能会溢出清除浮动该属性的值指出了不允许有浮动对象的边。clear:none | left | right | both适用于:块级元素取值:none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right: 不允许右边有浮动对象