什么是BFC
块格式化上下文(Block Formatting Context)是一个独立的渲染区域,简单来说就是一个独立的盒子,并且这个盒子里的布局不受外部影响,也不会影响到外部元素
BFC布局规则
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
哪些元素会生成BFC
根元素(html就是根元素)
position为absolute或fixed
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
float属性不为none(如:left | right)
overflow的值不为visible(如:hidden | auto | scroll)
BFC的作用及原理
看个小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .div1 { background-color: #ef6f6f; 200px; height: 100px; } .div2 { background-color: #fff086; 200px; height: 100px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> </body> </html>
块级元素的排列顺序是从上往下,下面给两个div添加外边距
.div1 { background-color: #ef6f6f; 200px; height: 100px; margin:30px; } .div2 { background-color: #fff086; 200px; height: 100px; margin:30px; }
属于同一个BFC的两个相邻的Box会发生margin重叠,所以我们可以设置两个不同的BFC容器,将第二个div包起来让他成为一个BFC
.bfc { overflow: hidden; }
自适应两栏布局
.div1 { background-color: #ef6f6f; 200px; height: 100px; margin:30px; } .div2 { background-color: #fff086; 200px; height: 100px; margin:30px; }
根据BFC规则
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
所以即使aside设置了左浮动,main的左边依然会与包含块的左边(即body)相接触。接着我们可以根据规则
BFC的区域不会与float box重叠
.main { height: 200px; background: #fcc; overflow: hidden; //加上overflow:hidden }
清除内部浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .parent { 300px; background-color: #e84343; border: solid 2px #e84343; } .child { 200px; height: 100px; float: left; border: solid 2px #2f2e2e; background-color: rgba(228, 133, 66, 0.6); } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </body> </html>
根据BFC布局规则
计算BFC的高度时,浮动元素也参与计算
为达到清除内部浮动,我们可以将.parent生成BFC,这样的话parent内部浮动元素也会参与计算
.parent { 300px; background-color: #e84343; border: solid 2px #e84343; overflow: hidden; }
总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,同样的,外面的元素也不会影响到容器里面的子元素