BFC(块级格式化上下文)的作用及生产方法
由于如浮动、margin值叠加等时候会用到BFC,但让我详细说BFC到底是什么,有说不清楚,所以决定对BFC的知识进行一个整理。
1.BFC是什么
BFC中三个英文字母B、F、C分别是Block(块级盒子)、Formatting(格式化)、Context(上下文)。
BFC的中文意思是块级格式化上下文。简单的理解BFC,其从样式上和普通盒子没有什么区别,其从功能上可以将其看作是隔离了的独立容器,容器里面的元素布局不会影响到外面的元素(如浮动、首元素的margin-top加到了父元素上等),并且BFC容器具有普通容器没有的一些特点,如包含浮动元素解决内容塌陷等。
BFC是特殊盒子(容器)所具有的的特性(属性),这种特殊盒子在样式上和普通盒子没有区别;其从功能上可以将其看作是隔离了的容器,容器里面的布局不会影响到外面的元素,并且该容器有一些普通容器没有的特殊能力(作用),如解决高度塌陷、解决margin值叠加等。
2.如何触发BFC
触发BFC的条件:
- 根元素(html、body)
- float不会none(left、right)
- 绝对定位元素(absolute、fixed)
- display设置为inline-block、table-cell、table-caption、flex、inline-flex
- overflow不为visible可看见的(hidden、scroll、auto)
3.BFC具备的特点及可以解决的问题
1.浮动元素导致父元素内容塌陷
浮动使内容塌陷代码:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>这是一个demo</title> 5 <style> 6 .ft1 { 7 padding: 20px; 8 background: yellow; 9 } 10 .cd1 { 11 float: left; 12 width: 100px; 13 height: 100px; 14 background: green; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="ft1"> 20 <div class="cd1"></div> 21 </div> 22 </body> 23 </html>
浮动使内容塌陷结果截图:
--------------------------------------------------------------------------------------------
使用BFC解决代码:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>这是一个demo</title> 5 <style> 6 .ft1 { 7 padding: 20px; 8 background: yellow; 9 display: inline-block; //使用display:inline-block;使ft1盒子转变为bfc容器 10 } 11 .cd1 { 12 float: left; 13 width: 100px; 14 height: 100px; 15 background: green; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="ft1"> 21 <div class="cd1">我是浮动元素</div> 22 </div> 23 </body> 24 </html>
使用BFC解决结果截图:
2.首节点设置margin-top使父元素向下移动
代码:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>这是一个demo</title> 5 <style> 6 body { 7 background: #f90; 8 } 9 .ft1 { 10 background: yellow; //由于padding-top、border-top也可以解决margin-top问题,所以去掉了padding:20px; 11 } 12 .cd1 { 13 margin-top: 100px; 14 width: 100px; 15 height: 100px; 16 background: green; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="ft1"> 22 <div class="cd1">我是添加margin-top</div> 23 </div> 24 </body> 25 </html>
结果截图:
--------------------------------------------------------------------------------------------
解决margin-top使父元素下移问题代码:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>这是一个demo</title> 5 <style> 6 body { 7 background: #f90; 8 } 9 .ft1 { 10 overflow: hidden; //生产bfc解决问题 11 background: yellow; 12 } 13 .cd1 { 14 margin-top: 100px; 15 width: 100px; 16 height: 100px; 17 background: green; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="ft1"> 23 <div class="cd1">我是添加margin-top</div> 24 </div> 25 </body> 26 </html>
解决问题截图:
3.相邻兄弟元素的margin-bottom与margin-top相覆盖
margin值覆盖问题代码:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>这是一个demo</title> 5 <style> 6 body { 7 background: #f90; 8 } 9 .box1 { 10 margin-bottom: 50px; 11 width: 300px; 12 height: 100px; 13 background: green; 14 } 15 .box2 { 16 margin-top: 50px; 17 width: 200px; 18 height: 150px; 19 border: 5px solid blue; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box1">我是一个绿盒子,距离下面50px,我的高是100px</div> 25 <div class="box2">我的边框是蓝色的,距离上边50px</div> 26 </body> 27 </html>
margin值覆盖问题结果截图:
--------------------------------------------------------------------------------------------
解决margin值叠加问题代码:
<html> <head> <meta charset="utf-8"> <title>这是一个demo</title> <style> body { background: #f90; } .box1 { margin-bottom: 50px; width: 300px; height: 100px; background: green; } .box2 { margin-top: 50px; width: 200px; height: 150px; border: 5px solid blue; display: inline-block; // 注意这儿使用overflow没能解决margin值重叠的原因 } </style> </head> <body> <div class="box1">我是一个绿盒子,距离下面50px,我的高是100px</div> <div class="box2"><div class="box3"></div>我的边框是蓝色的,距离上边50px</div> </body> </html>
解决margin值叠加问题结果截图:
--------------------------------------------------------------------------------------------
使用overflow解决margin值叠加时失败,代码:
<html> <head> <meta charset="utf-8"> <title>这是一个demo</title> <style> body { background: #f90; } .box1 { margin-bottom: 50px; width: 300px; height: 100px; background: green; } .box2 { margin-top: 50px; width: 200px; height: 150px; border: 5px solid blue; overflow: hidden; } </style> </head> <body> <div class="box1">我是一个绿盒子,距离下面50px,我的高是100px</div> <div class="box2"><div class="box3"></div>我的边框是蓝色的,距离上边50px</div> </body> </html>
使用overflow解决margin值叠加时失败,结果截图:
BFC的这些特殊能力(作用),都是基于其“是一个隔离了的容器,容器内部的布局不会影响到外面元素的布局”与 普通容器在功能上的差别所决定的。