float、overflow 与 BFC

这篇文章的起因是在写网站的过程中想用一个大的div抱住所有的float块，通过控制大div的width实现自适应局中的效果(详细原因见之前关于width的文章)。理想效果类似这样，背后的back块包住了所有的float信息块：

3_1.png

最初的尝试以失败告终，原因显而易见：float元素会脱离正常的文档流，使父元素的正常文档流中空无一物，在没有设置父元素高度的情况下造成父元素back的高度塌陷。

在解决这一问题的过程中，对float和BFC有了更近一步的认识，下面就简单介绍一下。

float布局

提到float，我总是想把它和一种position归到一起。的确，浮动和定位有很多让人感觉相似的地方。但正如双鱼书上所说：“浮动不完全是定位，不过，它当然也不是正常流布局”。关于浮动有太多细碎的知识点，我在下面选出了自己认为比较重要的几点作简要介绍：

• 浮动元素的包含块是其最近的块级祖先元素。
• 浮动与定位都可以使元素跳脱出正常的文档流实现自由布局，但两者给予的自由程度不同。利用定位我们可以精确设置元素的具体位置。而在浮动中我们只能借助浏览器帮助我们安放元素，而安放的具体依据是一系列关于元素左、上、右边界的具体限制，具体内容可参考双鱼书第十章。

在后来的操作过程中发现，其实并不需要让back包裹住所有float信息块，就算back高度为0，也能让所有float信息块实现局中，具体效果如下：

3_2.png

原因我想在于关于float元素左、右边界的两条限制：

• 左浮动元素的左外边界不能超出其包含块的左内边界。
• 左浮动元素的右外边界不能超出其包含块的右内边界。

overflow:hidden 与 BFC

虽然在局中这里没有太大的必要，但如何才能让一个大的div包含住所有的float元素呢？百度了一下，很多都提到了这样一个方法：

overflow:hidden

尝试了一下，这个方法确实能成功，但感觉很多人并没有说清楚这个为什么有用。这里讲一下自己粗浅的理解。

首先要明确的是，设置overflow属性的初衷并不是为了解决与float相关的这些奇奇怪怪的问题的。overflow的目的只是为了设置元素内容对于元素大小来说过大，溢出元素本身时的处理方式。之所以这里设置overflow:hidden能解决问题，只是因为这恰好触发了在设置overflow:hidden时元素自带的BFC机制，而这一机制帮助我们解决了包裹float元素这一问题。

BFC只是一套渲染规则，它决定了元素的子元素将如何定位，以及其和其他元素的关系和相互作用。很多时候我们都用到了BFC，只不过我们不知道而已。常见的如：

position:absolute
position:fixed

BFC规则最明显的特征在于它是一个独立的渲染区域。独立意味着，与外界相隔离。一旦元素创建了一个BFC，它其中的所有元素都会被它包裹，同样，容器里面的子元素不会影响到外面的元素(注意是在渲染的层面上)。

正因问BFC的这一特性，使其巧妙地解决了包裹float元素这一问题。同时，根据CSS外边距叠加的规则，BFC也可以用以阻挡外边距叠加。