BFC(块级格式化上下文)
可以把BFC理解成一块独立的渲染区域,BFC看成是元素的一种属性,当元素拥有了BFC属性后,这个元素就可以看做一个被隔离的独立容器,容器内的元素不会影响容器外的元素。
BFC的作用
1、避免外边距重叠(防止margin塌陷)
margin塌陷的意思是,同时给两个div设置相同的margin:100px 0;那么两个div之间的距离应为200px,但是如果没有设置BFC属性,上下两个div外边距之间的外边距会合并为一个边距,去最大值,如果margin相等,则距离仅为一个margin的距离。
没有设置BFC时,两个div之间的外边距
给其中一个div包裹一个父容器,设置BFC属性,可以解决margin塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
overflow: hidden;
}
.div1 {
width: 100px;
height: 100px;
background-color: green;
margin: 100px 0;
}
.div2 {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
</html>
2、清除浮动
如果子容器设置浮动,则父容器会失去高度支撑,没有高度
可以通过给父元素设置BFC属性来清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
border: solid red 2px;
overflow: hidden;
}
.div1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
</div>
</body>
</html>
3、阻止元素被浮动元素覆盖
一个兄弟元素设置浮动后,会导致该元素被覆盖
可以通过给被覆盖的元素设置BFC属性解决