定义

 

　　BFC全称为blockformattingcontext，意为块级格式化上下文，是Web页面中盒模型布局的css渲染模式。

 

　　可能上面的解释看了有点懵逼，通俗的说BFC指的的是一块区域的布局，这个区域的布局有一个显著特点：这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素。BFC比较常见的用法就是用来清除浮动的影响，正常不清楚浮动影响的情况下，父元素的高度是会坍塌的

 

　　那么什么时候会触发BFC呢？满足一下条件中任何一个：

 

　　float的值不为none

 

　　position的值不为static或者relate

 

　　display的值为table-cell、table-caption、inline-block、flex或者inline-flex中的任意一个

 

　　overflow的值不为visible

 

　　作用

 

　　清除浮动

 

　　我们经常会遇到这样的情况：当一个容器内包含的子元素包含浮动元素时，会导致容器没有高度，人们常用一个伪类，然后在伪类中用clear属性清除浮动，其实可以通过定义一个BFC来达到同样的目的，举个例子：

 

　　<divclass="container">

 

　　<div></div>

 

　　<div></div>

 

　　</div>

 

　　.container{

 

　　width:600px;

 

　　background-color:black;

 

　　}

 

　　.containerp{

 

　　float:left;

 

　　width:200px;

 

　　height:200px;

 

　　margin-left:10px;

 

　　background-color:green;

 

　　}





本文转载自中文网