
从 BFC 解决的问题看待 BFC…..
1. BFC是什么?
查阅了一些资料,觉得这个解释很合理:
Block fomatting context
= block-level box
+ Formatting Context
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
2. BFC的作用
- 解决 margin 重叠问题(父子重叠、兄弟重叠)
- 和浮动元素产生边界
- 解决浮动元素的父元素高度塌陷
总的来说,就是 BFC 布局规则的作用….
3. BFC布局规则:
- 内部的 Box 会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。(这说明BFC中子元素不会超出他的包含块,而 position 为 absolute 的元素可以超出他的包含块边界)
- BFC的区域不会与 float box 重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算 BFC 的高度时,浮动元素也参与计算
4. 哪些元素会生成BFC?
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
5. BFC 的使用场景对应布局规则
5.1 清除 margin 重叠
由布局规则第二条:
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
margin 重叠示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <style> * { padding: 0; margin: 0; } .box1, .box2 { font-size: 30px; text-align: center; color: #ccc; padding: 20px; height: 100px; width: 300px; border: 10px solid #ccc; background-color: aquamarine; } .box1 { margin: 50px; } .box2 { margin: 20px; } </style> <div class="box1">box1</div> <div class="box2">box2</div>
|
运行效果

形成 BFC 解决重叠
在 box2 外包一个 wrap 元素,并形成 BFC。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <style> * { padding: 0; margin: 0; } .box1, .box2 { font-size: 30px; text-align: center; color: #ccc; padding: 20px; height: 100px; width: 300px; border: 10px solid #ccc; background-color: aquamarine; } .box1 { margin: 50px; } .box2 { margin: 20px; } .warp { overflow: hidden; } </style> <div class="box1">box1</div> <div class="warp"> <div class="box2">box2</div> </div>
|
运行结果

5.2 和浮动元素产生边界
由布局规则第四条:
BFC的区域不会与float box重叠。
情况示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <style> * { padding: 0; margin: 0; } .warp { background-color: red; } .float{ float: left; width: 40px; height: 40px; background-color: #ccc; } </style> <div class="warp"> <div class="float"></div> <div class="text-box"> 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- --------------------------------------------------------- ----------- </div> </div>
|
运行结果

形成 BFC 和浮动元素产生边界
让 text-box 形成 BFC,使他浮动元素产生边界。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <style> * { padding: 0; margin: 0; } .warp { background-color: red; } .float{ float: left; width: 40px; height: 40px; background-color: #ccc; } .text-box{ overflow: auto; background-color: paleturquoise; } </style> <div class="warp"> <div class="float"></div> <div class="text-box"> 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- 我是一些文字,我有很多的文字------------------------------- --------------------------------------------------------- ----------- </div> </div>
|
运行结果

5.3 解决浮动元素的父元素高度塌陷
由布局规则第六条:
计算 BFC 的高度时,浮动元素也参与计算
高度塌陷的情况:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <style> * { padding: 0; margin: 0; } .warp { background-color: red; } .float{ float: left; width: 40px; height: 40px; background-color: #ccc; } </style> <div class="warp"> <div class="float"></div> </div>
|
运行结果

父元素形成 BFC 解决高度塌陷
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <style> * { padding: 0; margin: 0; } .warp { background-color: red; overflow: auto; } .float{ float: left; width: 40px; height: 40px; background-color: #ccc; } </style> <div class="warp"> <div class="float"></div> </div>
|
运行结果

6. 参考材料
CSS什么是BFC?
史上最全面、最透彻的BFC原理剖析
MDN-块格式化上下文
实验代码
父元素形成 BFC 解决高度塌陷1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> * { padding: 0; margin: 0; } .warp { background-color: red; overflow: auto; } .float{ float: left; width: 40px; height: 40px; background-color: #ccc; } </style> <div class="warp"> <div class="float"></div> </div> </body> </html>
|