深刻理解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属性说明