一、BFC
BFC[Box Formatting Context,块级格式化上下文]是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,容器外面的元素也不会影响到容器里面的元素。
1. 现象
- 一个盒子不设置高度,当里面的子元素浮动的时候,无法撑起自身
<style>
.box {
width: 600px;
border: 1px solid #000;
background-color: orange;
}
.c1 {
width: 200px;
height: 200px;
background-color: blue;
}
.c2 {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
未设置浮动前:
c1、c2设置浮动之后:
.c1 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
可以清楚的看到,外面的盒子高度没了。
原因其实也很简单,就是包裹c1,c2子元素的父元素没有形成BFC
2. 怎么形成BFC
- 方法一:float的值不是none
- 缺点:盒子不能平白无故的浮动
- 方法二:position的值不是static或者relative
- 推荐使用
- 方法三:display的值是inline-block,flex,table-cells或者是inline-flex
- 缺点:不够友好,盒子本来就是块级元素,变成inline-block,行内块
- 方法四:overflow除了visible以外的值(hidden、auto、scroll)
- 推荐使用
例如:上面的案例在父元素上加上overflow:hidden
.box {
width: 600px;
border: 1px solid #000;
background-color: orange;
overflow: hidden;
}
3. BFC的其他作用
-
BFC可以取消盒子margin塌陷问题
-
现象
<style> * { margin: 0; padding: 0; } p { width: 200px; height: 200px; background-color: orange; margin: 20px; } </style> <body> <p></p> <p></p> </body>
两个p标签的margin的值为20px,上下加起来应该是40px才对,而真实情况却只有20px,原因就是margin塌陷问题
-
使用BFC解决
# 1. 使用块级标签将p标签包裹起来 # 2. 块级标签具备BFC <style> * { margin: 0; padding: 0; } p { width: 200px; height: 200px; background-color: orange; margin: 20px; } div { overflow: hidden; } </style> <body> <div> <p></p> </div> <div> <p></p> </div> </body>
-
-
BFC可以阻止元素被浮动元素覆盖【不规范写法】
-
现象
<style> .c1 { width: 300px; height: 300px; background-color: orange; float: left; } .c2 { width: 200px; height: 200px; background-color: blue; } </style> <body> <div class="c1"></div> <div class="c2"></div> </body>
可以看到c2被c1覆盖
-
处理
# 1. 将c2变成具备BFC特性 .c2 { width: 200px; height: 200px; background-color: blue; overflow: hidden; }
-