BFC块级格式化上下文的特性及使用场景

1. 清除元素内部浮动，使包含浮动元素

在通常情况下父元素的高度会被子元素撑开，而如果父元素没有设置高度，其子元素均为浮动元素，此时父元素会发生了高度坍塌，上下边界重合，即浮动元素无法撑起父元素。这时就可以用BFC来清除浮动了，未清除浮动时的代码如下：

<style> .outer{ border: 2px solid black; /* overflow: hidden; */ } .red{ background: red; width: 100px; height: 100px; float: left; } .green { width: 200px; height: 200px; background-color: green; } </style> <div class="outer"> <div class="red"></div> </div> <div class="green"></div>

效果如下：

可以看到：外面的outer盒子并没有被内容所撑开，而且下面没有浮动的盒子也"顶"了上去

解决办法：给outer添加overflow:hidden ，效果如下：

2. 不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏三栏布局就是这么做的。可以给未浮动的元素加 overflow: hidden，触发bfc来解决遮挡问题。

代码如下：

<style> .green { width: 100px; height: 100px; background: #090; float: left; } .red { background: #f00; width: 300px; height: 300px; /* overflow: hidden; */ } </style> <div class="green"> </div> <div class="red"> </div>

效果如下：

可以看到：红色盒子的部分被浮动的绿色盒子遮挡

解决办法：给红色盒子添加 overflow:hidden  ，效果如下

3. 阻止外边距折叠

折叠的两种情况：一是父子上外边距叠加；二是兄弟外边距叠加。

第一种：父子上外边距折叠

代码如下：

<style> .father{ width: 200px; height: 200px; background-color: #bfa; /* float: left; */ /* 开启BFC */ /* overflow: hidden; */ } .son{ width: 100px; height: 100px; background-color: yellow; margin-top: 100px; } </style> <div class="father"> <div class="son">son</div> </div>

效果如下：

可以看到：当子元素设置了margin-top: 100px; 此时，父元素和子元素外边距重叠了，子元素和父元素都往下移动了100px

解决办法：此时，父元素设置overflow: hidden;或者float:left 使其开启BFC,即可消除外边距重叠问题。

效果如下：

第二种上下兄弟元素代码如下：

<style> .up { background: #f00; width:100px; height: 100px; margin-bottom: 50px; /* display: inline-block; */ } .down { background: #090; width: 200px; height: 200px; margin-top: 20px; /*display: inline-block; */ } </style> <div class="up"> </div> <div class="down"> </div>

效果如下：

可以看到：两个盒子的外边距其实发生了重叠

解决办法：给上下两个盒子的任意一个设置inline-block，这里就不能设置overflow：hidden了

效果如下：

如果仍然想用overflow：hidden，可以通过给子元素包一层div，给div设置overflow：hidden，代码如下：

<style> .up { background: #f00; width:100px; height: 100px; margin-bottom: 50px; overflow: hidden; /* display: inline-block; */ } .wrapper { overflow: hidden; } .down { background: #090; width: 200px; height: 200px; margin-top: 20px; /*display: inline-block; */ } </style> <div class="up"> </div> <div class="wrapper"> <div class="down"> </div> </div>

效果同上。

 

总结

元素开启BFC后的特点： 1.不会被浮动元素所覆盖 2.子元素和父元素外边距不会重叠 3.可以包含浮动的子元素

关于兄弟元素外边距重叠不能使用overflow:hidden的思考：

不发生折叠的触发因素是浮动元素、inline-block 元素、绝对定位元素等, 这个只是创建BFC因素的子集, 但并不能说明创建了BFC的元素就不会发生折叠, 因为BFC还可以用overflow:hidden来创建。相反如果父元素形成了BFC, 那么他的块级子元素之间反而会发生折叠。