目录
一、高度塌陷
1、什么是高度塌陷
当我们不确定子元素的大小和宽高，通过子元素的宽高决定父元素宽高时，会出现这种情况
（1）我们需要多个子元素，子元素可以控制宽高，且行排列
（2）由于子元素不超过父元素边界，我们使用浮动
但由于子元素脱离文档流，则导致在文档流中的父元素无法获取子元素的宽高，导致高度塌陷
2、高度塌陷实例
二、清除属性
1、清除作用的效果
消除浮动对后面元素的影响
2、清除作用的原理
通过强制添加外边距的方式对后面元素进行影响
3、清除作用的实例
在本例中，1和2分别进行左浮动和右浮动，3进行了清除，所以它会保持块元素性状，始终在1和2的下方
4、清除的可选值
（1）left清除左边浮动影响
（2）right清除右边浮动影响
（3）both清除两侧影响较大的浮动影响，在上面的例子中，清除了2的影响
三、BFC
1、什么是BFC
（1）BFC全名块级格式化环境，英文名block formatting context
（2）BFC是CSS中隐含样式，脱离于整体布局，自建布局模式，形成独立布局区域，多用于解决float脱离文档流后高度塌陷
2、BFC特点
（1）不会被浮动元素覆盖
（2）子元素父元素边距不会重叠
（3）开启BFC可以包含浮动的子元素
3、如何开启BFC
（1）父元素float，但是会影响父元素布局（不推荐）
（2）将元素设置为行内块元素，但会导致宽度消失（不推荐），例如
display: inline-block;（3）将元素overflow设置为非visible（默认值），通常是hidden或者auto，可以解决大多数问题，且副作用比较小，比较常用，例如
overflow: hidden;
（4）通过display设置为flow-root，尚不清楚副作用如何（听说官方文档中无副作用）
四、边距折叠和高度塌陷完美解决方案
1、原理
（1）通常进行浮动时，会不止一个元素，也就是说，我们可以浮动一部分元素，另外一部分不浮动，用以撑起高度
（2）用clear清除前面的浮动影响，那么就会成为可行排列的块元素，高度由后面的元素撑起，例如
本图中，蓝色区域是一个div标签，紧跟在绿色区域后，它清除了绿色区域的浮动影响，这里加了背景颜色和大小，方便观察
蓝色区域代码：
.box{
background-color: blue;
clear: both;
width: 100px;
height: 200px;
}2、比较合理的方式
（1）但是，假如后面的高度与前面浮动的高度不同，仍然会出问题
（2）那么，就不对后面的元素操作，让它“闲置”，仅仅用于前面浮动元素的“压箱底”，例如
此图与上面同属一个代码，但仅仅取消了div标签的高度和宽度以及背景颜色
clear区域代码：
.box{
clear: both;
}3、最完美的方式
（1）该方法犯了一个很大的错误，用HTML结构去影响CSS的样式，这是容易出错的
（2）在卡面提到了每一个元素有before和after伪类，这是元素的内容之外但又收敛于元素的属性，对该伪类进行clear，则完美无缺
（3）常自定义这个clearfix类，使用时添加到class中，可同时解决高度塌陷和边距折叠
注意：该伪类作用于父元素，将父元素的before和after作为填充物，如果作用于子元素会出错
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}五、代码
1、高度塌陷与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>高度塌陷与BFC</title>
<style>
/*
介绍：
BFC(block formatting context)块级格式化环境
BFC是css中隐含样式，脱离于整体布局，自建布局模式，形成独立布局区域
多用于解决float脱离文档流后高度塌陷
特点：
1.不会被浮动元素覆盖
2.子元素父元素边距不会重叠
3.开启BFC可以包含浮动的子元素
方式：
1.父元素float，但是会影响父元素布局（不推荐）
2.将元素设置为行内块元素，会导致宽度消失
display: inline-block;
3.将元素overflow设置为非visible（默认值），通常是hidden或者auto
*/
.outer {
border: solid red 10px;
/* overflow: hidden; */
/* 听说没有副作用 */
/* display: flow-root; */
}
.inner {
background-color: #bfa;
width: 200px;
height: 200px;
float: left;
}
.box {
/* background-color: blue; */
clear: both;
/* width: 100px; */
/* height: 200px; */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="box"></div>
</div>
</body>
</html>
2、清除
<!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>清除</title>
<style>
div {
font-size: 50px;
width: 100px;
height: 100px;
}
.box1 {
background-color: #bfa;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: right;
}
.box3 {
background-color: blue;
/*
清除浮动影响，both默认清除最大影响
原理：
加上上外边距
*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
3、clearfix
<!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>同时解决边距折叠与高度塌陷</title>
<style>
.outer {
border: 10px solid red;
}
.inner {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: orange;
}
/* .outer::before,
.outer::after{
content: '';
display: table;
clear: both;
} */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner">
<div class="box"></div>
</div>
</div>
</body>
</html>