高度塌陷
在浮动布局中，如果未设置父元素的高度，则默认被子元素高度撑开，当子元素脱离文档流时，父元素的高度会消失，这就是高度塌陷。举例如下：
<!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>
.content{
width: 1000px;
background-color: bisque;
border: 1px solid black;
}
.content div{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
展示效果：
高度塌陷的解决方法：
1.为父元素设置固定高度（不利于后期维护）
.content{
width: 1000px;
height:100px;
background-color: bisque;
border: 1px solid black;
}
2.往父元素末尾添加一个空元素，高度为其子元素中最高的
<div style="height: 100px;"></div>
3.为父元素设置一个伪类::after,并设置属性值content:””,display:block,clear:both。
.content::after{
content: "";
display: block;
clear: both;
}
4.开启元素的BFC
何为BFC？
Block Formatting Contents(块级格式化上下文)，这是页面中的一块渲染区域，并有自己的一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
具有BFC特性的元素可以看作是隔离了的独立元素，容器里面的元素不会在布局上影响外面的元素，且具有一定特性。
通俗一点讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
BFC的触发条件
满足以下条件之一，可以开启元素的BFC：
- 1.float的值不是none
- 2.position的值不是static或者relative
- 3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- 4.overflow的值不是visible
content容器下的div就是一个个单独的BFC容器
.content div{
width: 100px;
height: 100px;
background-color: blue;
float: left;/*触发了BFC*/
}
BFC的应用
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>
.box1{
width: 200px;
background-color: pink;
border: 1px solid black;
overflow: hidden; /*开启BFC*/
}
.box2{
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
未开启BFC前页面展示为：父元素发生了高度塌陷
开启BFC前页面展示为：父元素高度被子元素内容撑开
BFC解决margin值传递问题
像使用margin出现了传递和叠加的问题时，可以采用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>
.box1{
width: 200px;
height: 200px;
background-color: pink;
overflow: hidden; /*开启BFC*/
}
.box2{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
未开启BFC前页面展示为：子元素的margin发生了传递到父元素身上
开启BFC后页面显示为：此时的子元素的margin正常作用
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>
section{
overflow: hidden;/*触发BFC*/
}
.box1{
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 40px;
}
.box2{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 30px;
}
</style>
</head>
<body>
<section>
<div class="box1"></div>
</section>
<section>
<div class="box2"></div>
</section>
</body>
</html>
未开启BFC前页面展示为：兄弟元素之间的margin会重叠
开启BFC后页面显示为：此时的双方元素的margin正常作用
本文含有隐藏内容，请 开通VIP 后查看