-
概念:BFC是块级格式化上下文,用于布局块级盒子的一块渲染区域。
-
BFC触发方式:
① 根元素,即HTML标签。
② 浮动元素,即float为left、right。
③ overflow的值不为visible,为auto、scoll、hidden。
④ display的值为inline-block、flex、grid、table等。
⑤ 定位元素,即position为absolute、fixed。 -
作用:
① 清除浮动。
当子元素存在float属性时,父容器没有设置高度,父容器的高度由子元素撑起。这时候在父容器中添加overflow:hidden来创建一个BFC即可解决问题。
<div class="container">
<div></div>
<div></div>
</div>
.container {
width: 600px;
background-color: black;
}
.container div {
float: left;
width: 200px;
height: 200px;
margin-left: 10px;
background-color: green;
}
+++改进后++++
.container {
width: 600px;
background-color: black;
overflow: hidden;
}
.container div {
float: left;
width: 200px;
height: 200px;
margin-left: 10px;
background-color: green;
}
② 防止文字环绕。
图片设置float:left,文字设置overflow:hidden。
<div>
<img src="../wddw" alt="">
<p>test test test test test test test test test test test test test</p>
</div>
img {
float: left;
width: 40px;
height: 40px;
}
++++改进后++++
img {
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
}
p {
overflow: hidden;
}
③ 防止外边距折叠。
在常规文档流中,子元素是沿着父元素顶部开始一个一个摆放,相邻兄弟间的垂直间距由他们当中间距最大的一个来决定,而不是叠加在一起,这就形成了边距折叠。这时候只用在一个兄弟上面再嵌套一个div即可。
<div class="container">
<p class="one">one</p>
<p class="two">two</p>
</div>
container {
width: 200px;
background-color: black;
}
p {
width: 150px;
background-color: green;
}
.one {
margin: 10px 0;
}
.two {
margin: 20px 0;
}
++++改进后++++
<div class="container">
<p class="one">one</p>
<div class="new">
<p class="two">two</p>
</div>
container {
width: 200px;
background-color: black;
}
p {
width: 150px;
background-color: green;
}
.one {
margin: 10px 0;
}
.two {
margin: 20px 0;
}
.new {
overflow: hidden;
}