CSS学习笔记-浮动（float，clear）

浏览数：161 / 时间：2015年06月09日

float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

属性值：

left 元素向左浮动。

right 元素向右浮动。

none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit 规定应该从父元素继承 float 属性的值。

当同一排元素使用float：right时，左边的元素会先浮动到右边，如下图：

　　无浮动　　　　　　　　　　　　 float：right

当一个元素为块级元素，另外一个元素浮动时，浮动元素依旧会换行：

当有两个元素浮动，一个元素不浮动时。若不浮动的元素为块级元素，则会忽视浮动元素进行布局，如图：

若设置为内联元素，则该元素会在空白处环绕浮动元素，如图：

若是IE浏览器 8之前的版本，无论是块级元素还是内联元素都如下图：

不会忽视浮动。

若有多个长度不等的浮动元素，且容器宽度不够时：

第一行剩余空间不足以满足黄色框的宽度，于是黄色框下移。很有趣的是，黄色框并没有在灰色之下，而是在玫红色框之下，因为玫红色框高度比灰色少。

综上，当给元素设置浮动后，个人感觉该元素类似于拥有了display：inline-block属性。可以像块级元素一样设置margin、width、height，又可以使文本、内联元素紧随其后而不换行。

可以参考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

浮动也可能导致容器元素高度塌陷（容器不设置height的情况下）：

1.当容器内只有浮动元素，那么容器会塌陷：

很奇怪，IE7不会塌陷：

而当我把width去掉之后又塌陷了：

2.若将div3的浮动去掉，则：

容器撑开了，块级元素叠加（如上所说）。

3.若将div3改为display:inline

这是不是能说明：计算容器元素高度的时候，浮动元素相当于脱离了文档流（但其实并未真正脱离，因为内联元素还能环绕在其周围）。当然，我这里没有测试IE6 7。

clear

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

属性值：

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

inherit 规定应该从父元素继承 clear 属性的值。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

参考：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 清除浮动部分

怎么理解呢？就拿下面的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。