带你揭开BFC的神秘面纱( 二 ) 1.引言在前端的布局手段中

4. 利用BFC解决问题在你明白了解BFC的触发规则之后，那么就需要利用BFC的特点来解决我们在布局中遇到的一些问题了，还记得我们之前说过， BFC有一个特点是：**每一个BFC区域都是相互独立，互不影响的。 **4.1 解决外边距的塌陷问题（垂直塌陷）开发中，前端的布局手段，离不开外边距margin ，那么，也会遇到一些问题，例如外边距的垂直塌陷问题。
文章插图
通过以上的实例，我们会发现，代码给两个div盒子，都添加了四个方向的margin ，讲道理，学过数学的都知道， 100+100=200.可是，盒子之间的距离，现在却之后100px 。这就是很典型的margin的塌陷，两段margin重叠到了一块，互相影响。那么，如何利用BFC ，让这个问题得到解决呢。回忆下，上文说过， BFC ，就是一个与世隔绝的独立区域，不会互相影响，那么，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。
文章插图
4.2 利用BFC解决包含塌陷
当父子关系的盒子，给子元素添加margin-top ，有可能会把父元素一起带跑
文章插图
原本，正确的显示方式，应该是粉色盒子与红色盒子的顶部距离为50px ，但是由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这个时候，就可以触发BFC ，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。
文章插图
4.3 当浮动产生影响的时候，可以利用BFC来清除浮动的影响
文章插图
以上代码表示，一个没有设置高度的父盒子，包含着七个子元素。如果此时，所有的子元素都浮动的话。
文章插图
当所有的子元素都浮动了，这个时候，父盒子失去了原有的高度，这就是浮动的影响。这个时候，同样也可用BFC的机制，来清除浮动带来的影响。使用BFC ，将所有的浮动元素包裹起来。
文章插图
4.4 BFC可以阻止标准流元素被浮动元素覆盖
文章插图
以上情况，红色盒子浮动，蓝色盒子时标准流，默认情况下，浮动元素覆盖了标准流元素。但是，如果将蓝色盒子的BFC触发，那么情况将有所变化。
文章插图
当蓝色盒子触发了BFC之后，浮动元素再也不能覆盖它了，而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应
5. 总结