BFC和overflow解决部分问题的原理

BFC和overflow解决部分问题的原理

资源链接：https://blog.csdn.net/zj128548/article/details/77684187

关于BFC

普通文档流的盒子属于一种格式化上下文，它可能是块状或者行内元素，但是不可能同时是二者。块状盒子属于块状格式化上下文(BFC)，行内盒子属于内格式化上下文。

1.创建BFC的条件:

float的属性不是none;

overflow的属性不是visible

position的属性是absolute,fixed

display的属性是:inline-block,table-cells,table-caption

只要满足以上条件我们就触发了BFC

2.BFC的属性:

(1)BFC中，盒子从包含块的顶部一个个在垂直方向上排列。

 

(2)两个兄弟元素的垂直距离由margin决定。同一个BFC的块级兄弟元素的垂直外边距会被叠加。

(3)在BFC中，每个盒子的左外边距接触包含块的左边，即使存在浮动元素也一样。

 

用BFC解决overflow相关问题

1.用overflow解决外边距叠加

 

1. <div class="wrapper">

2. <div class="first"></div>

3. <div class="last"></div>

4. </div>

5. <div class="container">

6. <div class="first"></div>

7. <div class="last bfc"></div>

8. </div>

9. <style>

10. .wrapper,.container{border:2px solid #cff;width: 500px;}

11. .wrapper{float: left;}

12. .first,.last{width: 300px;height: 50px;margin: 20px;}

13. .first{background-color: pink;}

14. .last{background-color: yellow;}

15. .bfc{overflow: hidden;}

16. </style>

这里用到了BFC特性之二:

两个兄弟元素的垂直距离由margin决定，同一个BFC中的块状兄弟元素的垂直外边距会被叠加。

2.用overflow清除浮动

BFC的高度会包含浮动元素高度

3.用overflow解决图片环绕

给p加overflow元素，解决图片文字环绕问题。

原理是:BFC里的每个盒子元素的左外间距都紧贴包含块的左边距。

总结:

BFC的布局特性:

内部盒子在垂直方向一个接一个放置。

兄弟元素的外边距由margin决定，在同一个BFC中的垂直边距会增加。

BFC的高度包含浮动元素

BFC的区域不会与浮动元素重叠（解决图片环绕问题）

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。