深入理解css之BFC

BFC的定义

BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部元素的变化也不会影响到BFC内部元素，这就跟结界一样，你可以理解为有一个很强的护盾在包裹着BFC元素，这也是为什么BFC元素不会发生margin重叠的原因。

引起BFC的条件

BFC起作用不需要特别多的条件，满足以下情况都会引起BFC：

• html根元素
• float不为none的元素
• overflow为auto、hidden或scroll的元素
• position不为relative或none的元素
• display为inline-block的元素
• table-cell、table-row或者table-caption元素

在清除浮动的时候，只要元素满足以上这些情况，就不需要再加clear属性。

BFC与自适应布局

在之前的文章中，我们有说到过float实现的文字环绕效果，这时候如果给文字加上overflow:hidden就可以实现两栏自适应布局。这样实现的好处是文字的宽度是自适应的，无论图片是多大或多小，排版都不会乱。代码和效果如下：

.fl {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.content {
    overflow: hidden;
}

<div>
    <img src="./card.jpg" alt="" class="fl">
    <div class="content">
        这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，
        这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示
    </div>
</div>

图片和文字之间如果需要间距，可以在图片中设置margin-right的值或者透明border，也可以在内容区设置透明border，但是不可以直接在内容区设置margin-left，如果是设置了margin-left，其间距必须是图片的宽度加上你想设置的间距大小，这样的间距就会对图片的大小产生依赖。

与BFC有关的属性说明

由于引起BFC的属性都有一些古怪的特性，并不是所有的情况都适合实现自适应布局，下面我们来一一说明下：

• float属性，设置了float之后，元素本身也会BFC化，由于具有破坏性和包裹性，也就失去了宽度自适应的特性，所以float并不适合自适应布局。
• position属性，position会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。
• overflow:hidden，这个属性要比float和position好很多，设置了overflow:hidden的元素，整体上跟普通元素差不多，也保留着普通元素的宽度自适应性，但是有一个缺点，就是内容溢出会被裁剪。在平时的开发中，这种场景不是很常见，因此overflow: hidden可以作为常用的BFC布局。
• display:inline-block，由于inline-block会让元素尺寸包裹，因此也不适用于BFC布局。
• display:table-cell，table-cell会让元素表现得跟单元格一样，其有两个特性，一个是父元素宽度足够时，展示的是设置的宽度；第二个是，但元素宽度超出父元素时，展示的是父元素的宽度。因此，table-cell也可用于BFC布局，其原理就是设置一个足够多的宽度值，例如3000px，这样就可以充分利用浏览器的剩余空间，也不会产生滚动条，内容也是自适应的。
• display:table-row，其对width无感，无法自适应剩余浏览器空间。
• display:table-caption，没有任何用处。

总结

• BFC的定义，BFC就如同结界一样，完全封闭对外无任何影响。
• 引起BFC的各种属性
• BFC与自适应布局
• 自适应布局与BFC属性说明