BFC的形成与作用

BFC是指 Block Fromatting Context，即块级作用上下文。那么BFC是怎么产生的呢？

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。w3c对BFC的定义看起来不是很易懂。换个说法：

　　1.float元素。

　　2.position不是static，relative。

　　3.display为inline-block, table-cell, table-caption，flex和inline-flex。

　　4.overflow不为visiable。

BFC内的元素不受外界影响，块盒和行盒垂直挨着BFC边框排列。

BFC的作用是什么呢？

1.解决浮动导致父元素高度问题

浮动如float：left会导致元素脱离文档流，如果某个父元素包含浮动子元素并未定义height或height：auto；，可能导致父元素高度不会被撑开。

.parent{
    width: 200px;
    background: green;
}
.child{
    width: 100px;
    height: 100px;
    background: green;
}

<div class="parent">
    <div class="child"></div>
</div>

　　这是父元素不加高度，子元素不浮动的效果。当给子元素一个float：right时如下，发现父元素不见了。为了解决这个问题我们除了可以使用父元素:after或:before伪类清楚浮动外。还可以使用BFC。

BFC之后的效果。-->给父元素添加了overflow:hidden。

2.通过BFC解决文字环绕

 

.parent{
    background: green;
}
.child{
    width: 100px;
    height: 100px;
    background: red;
    float:left;
}
.word{
    width: 200px;
    height: 200px;
    background: yellow;
}
<div class="parent">
    <div  class="child"></div>
    <p class="word">浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。w3c对BFC的定义看起来不是很易懂</p>
</div>

　　效果如上，文字是环绕着浮动元素的。先解释环绕原理：因为p元素有部分是被浮动元素覆盖，此时行元素（文本）进行了移位。如果期望不是环绕，怎么解决呢？在这篇文章里肯定就是BFC了...^_^

BFC不会与float盒子重叠，因此只需对p标签声明为BFC即可。

 

转载于:https://www.cnblogs.com/yiangli/p/10032335.html