一、块级格式化上下文(BFC)
1、什么是块级格式化上下文?
Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素)
2、触发BFC的条件如下:
- 根元素
- float的值不为none。
- overflow 除了 visible 以外的值(hidden,auto,scroll)
- display的值为table-cell, table-caption, inline-block中的任何一个。
- 绝对定位元素:position (absolute、fixed)
- 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
3、BFC 的布局规则:
- 内部的盒子会在垂直方向,一个个地放置;
- BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ;
- 计算BFC的高度时,浮动元素也参与计算
- 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
- BFC的区域不会与float重叠;
4、BFC特性
1.同一BFC下外边距会发生折叠:
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>外边距折叠</title> <style> body{ margin:0; } .box{ width:500px; height:500px; margin:0 auto; } .btm1{ width:100px; height:100px; background-color:orange; margin:100px; } .btm2{ width:100px; height:100px; background-color:red; margin:100px ; } </style> </head> <body> <div class="box"> <div class="btm1">上下100margin</div> <div class="btm2">上下100margin</div> </div> </body> </html>
效果图:
第一个div的下边距和第二个div的上边距发声了重叠,所以两个盒子之间距离只有100px,而不是200px。
解决方法:
- 放在不同的BFC下
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>外边距折叠</title> <style> body{ margin:0; } .box{ width:500px; height:500px; margin:0 auto; } .btm1{ width:100px; height:100px; background-color:orange; margin:100px; } .btm2{ width:100px; height:100px; background-color:red; margin:100px ; } .container{ overflow: hidden; } </style> </head> <body> <div class="box"> <div class="container"> <div class="btm1">上下100margin</div> <div> <div class="container"> <div class="btm2">上下100margin</div> <div> </div> </body> </html>
效果图:
这次我们可以清晰的看清两个中间是200px;并没用重叠。
2、BFC可以包含浮动的元素(清除浮动)
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>高度塌陷</title> <style> body{ margin:0; } .box{ width:500px; margin:0 auto; border:1px solid green; } .btm1{ width:100px; height:100px; background-color:orange; float:left; } .btm2{ background-color:red; } </style> </head> <body> <div class="box"> <div class="btm1">浮动</div> <div class="btm2"></div> </div> </body> </html>
效果图:
由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC,那么容器将会包裹着浮动元素。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>高度塌陷</title> <style> body{ margin:0; } .box{ width:500px; overflow:hidden; margin:0 auto; border:1px solid green; } .btm1{ width:100px; height:100px; background-color:orange; float:left; } .btm2{ background-color:red; } </style> </head> <body> <div class="box"> <div class="btm1">浮动</div> <div class="btm2"></div> </div> </body> </html>
3、侵占浮动元素的问题
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>高度塌陷</title> <style> body{ margin:0; } .box{ width:500px; overflow:hidden; margin:0 auto; border:1px solid green; } .btm1{ width:100px; height:100px; background-color:orange; float:left; } .btm2{ width:300px; height:300px; background-color:red; } </style> </head> <body> <div class="box"> <div class="btm1">浮动</div> <div class="btm2"> 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! </div> </div> </body> </html>
效果图:
解决方法:
通过触发btm2的BFC解决
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>高度塌陷</title> <style> body{ margin:0; } .box{ width:500px; overflow:hidden; margin:0 auto; border:1px solid green; } .btm1{ width:100px; height:100px; background-color:orange; float:left; } .btm2{ width:300px; height:300px; background-color:red; } .bb{ overflow:hidden } </style> </head> <body> <div class="box"> <div class="btm1">浮动</div> <div class="bb"> <div class="btm2"> 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! 欢迎大家观看! </div> </div> </div> </body> </html>
效果图: