一、BFC的理解
BFC（即块级格式化上下文），它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
注意：只有块级盒子参与。
二、什么样的情况下，未形成BFC？
例如：
一个盒子不设置height，当内容子元素都浮动时，就无法撑起自身，这个盒子就没有形成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>
.son {
width: 200px;
height: 200px;
background-color: pink;
float: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
如何让父盒子有高度呢？
法一：
.father {
float: left;
}
法二：
.father {
position: absolute;
}
法三：
.father {
display: inline-block;
}
法四：
.father {
overflow: hidden;
}
三、创建BFC的方法
方法一：float的值不是none
方法二：position的值不是static或者relative
方法三：display的值是inline-block、flex或inline-flex
方法四：overflow:hidden;
这四种方式，更推荐使用哪一种？
更推荐使用方法四：overflow:hidden;
<!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>
.son {
width: 200px;
height: 200px;
background-color: pink;
float: left;
border: 1px solid #000;
}
.father {
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
</div>
<a href="#">123</a>
</body>
</html>
因为其他三种方法都可能影响到其他盒子。
比如说第三种：display:inline-block;会导致a标签的内容与父盒子在同一行。
<!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>
.son {
width: 200px;
height: 200px;
background-color: pink;
float: left;
border: 1px solid #000;
}
.father {
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
</div>
<a href="#">123</a>
</body>
</html>
四、BFC的作用
（1）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>
.father {
width: 200px;
height: 200px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
取消盒子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>
.father {
width: 200px;
height: 200px;
background-color: pink;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</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>
.son {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son-last {
width: 100px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son-last"></div>
</div>
</body>
</html>
阻止元素被浮动元素覆盖：
<!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>
.son {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son-last {
width: 100px;
height: 200px;
background-color: pink;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son-last"></div>
</div>
</body>
</html>
网友评论