float和清除浮动

float元素的特性

包裹性

包裹性由“包裹”和“自适应”两部分组成。

1）包裹

“包裹”是指浮动元素若没有指定宽度和高度，则设置适应内容的宽度和高度。即使是块级元素，width也不再占满屏幕的一行。

（图中红色为father，蓝色为浮动元素son，绿色为content）

2）自适应

“自适应”是指浮动元素的宽度随着其内容的增多而增大。当浮动元素的宽度到达其父元素的宽度时，就会让其内容换行来适应父元素的宽度。不过当内容为英文单词，且单词很长，以致于超过浮动元素的父元素时，则没法通过换行来适应父元素的宽度，浮动元素的区域仍然会超出其父元素的区域。需要注意的是，该特性只对浮动元素的父元素的宽度有效，对高度无效。

高度塌陷

如该图所示，父元素的高度并没有被子元素撑开。原因是当元素设置float后，会自动脱离文档流。也就是说，处于文档流中的父元素当自己那个浮动的子元素不存在，从而造成塌陷。

（红色为父元素的border，蓝色为子元素）

（父元素float:left，子元素float:left）

（父元素float:left，子元素float:right）

（父元素float:left，子元素float:none）

如果父元素设置为浮动（即创建BFC），则子元素不管浮动不浮动，都是和父元素看起来像共同处于另一个文档流中了。

块状化

一旦一个元素的float属性不为none，则其display计算值就是block或table，这就叫块状化。这里的块状不是说块级元素，因为浮动元素并不像块级元素那样占满父元素的宽度并且有换行，而是只我们可以设置该浮动元素的高度和宽度。

float的用法

<style>
  #A {
    width: 100px;
    height: 100px;
    float: none;
    background: red;
  }
  #B {
    width: 100px;
    height: 100px;
    float: none;
    background: blue;
  }
</style>

<div id="A"></div>
<div id="B"></div>

实验结果如下：

可以看出：

• 若float为left，则元素会向上移动，直到上边缘与最近的非浮动元素的下边缘相邻，同时向左移，直到左边缘与最近的左浮动元素的右边界或父元素的左边界相邻。

• 若float为right，则元素会向上移动，直到上边缘与最近的非浮动元素的下边缘相邻，同时向右移，直到右边缘与最近的右浮动元素的左边界或父元素的右边界相邻。

• 若float为none，则元素向上移动，直到上边缘与最近的非浮动元素的下边缘相邻，且不会左右移动。

清除浮动

使用clear

• clear:left：清除该元素前左浮动元素的影响。
• clear:right：清除该元素前右浮动元素的影响。
• clear:both：结合以上两点。

缺点：

添加空div清除浮动，但代码不简洁。

使用css插入伪元素，但IE6/7不支持伪元素。

借助BFC

BFC可以被浮动子元素撑起，但有以下缺点：

• 子元素使用float，那就得父元素全部使用float。

• overflow属性会影响滚动条和绝对定位的元素。

• position会改变元素的定位方式。

• display依然没有解决低版本IE的问题。

借助hasLayout

IE6/7有一个hasLayout的概念，当元素的hasLayout为false时，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸和设置。我们可以利用这点在IE6/7下完成清除浮动。下面的方法可以使元素的hasLayout变为true。

• position为absolute

• flaot为left和right

• display为inline-block

• width除auto以外的任意值

• height除auto以外的任意值

• zoom除normal以外的任意值

• writing-mode：tb-rl

• IE7中使用overflow为hidden、scroll、auto

相对靠谱的解决方案

IE+、现代浏览器上使用伪元素。

IE6/7上使用hasLayout。建议使用zoom:1，因为这不会造成其他影响。