bfc理解及应用

bfc 是盒模型布局的css渲染模式。属于正常文档流。

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

浮动，绝对定位，inline-blocks,table-cells,table-captions和overflow不为visible的元素都将创建一个bfc（block Formatting context）块级格式化上下文。

bfc导致的问题

外边距折叠（padding margin折叠问题）。同属一个bfc的元素会产生这样的问题，克服这个问题，创造一个新的bfc就好了

<div class="container"> 
    <p>Sibling 1</p> 
    <p>Sibling 2</p> 
    <div class="newBFC"> 
        <p>Sibling 3</p> 
    </div> 
</div>

css

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ } 

p { margin: 10px 0; background-color: lightgreen; } 

.newBFC { overflow: hidden; /* creates new block formatting context */ }

清除浮动，子元素浮动，父元素失去高度。用bfc来包裹浮动。overflow:hidden

清除文字环绕效果

<div class="container"> 
    <div class="floated">Floated div</div>
    <div class='bfc'> 
        <p>Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.
        </p>
    </div> 
</div>



.floated{
  float:left;
  width:100px;
  height:50px;
  background:#ccc;
}
.bfc{
  overflow:hidden;
}

多列布局中，取整可能会把元素挤到下一行.
具体应用看这里

参考资料
w3cplus
bfc理解

bfc理解及应用

推荐阅读更多精彩内容