一、高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。所以高度塌陷是浮动布局中比较常见的一个问题，并且这个问题我们必须进行处理。
<!DOCTYPE html>
<html>
<head>
<title>高度塌陷</title>
<meta charset="utf-8">
<style>
.outer{
border: 10px red solid;
}
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.div1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="div1"></div>
</body>
</html>
二、块级格式化环境
块级格式化环境（BFC）是 CSS 中一个隐含的属性，可以为一个元素开启 BFC，开启 BFC 之后，该元素会变成一个独立的布局区域。
元素开启 BFC 的特点：
- 开启 BFC 的元素不会被浮动元素所覆盖
- 开启 BFC 的元素子元素和外边距不会重叠
- 开启 BFC 的元素可以包含浮动的子元素
因为 BFC 是 CSS 中的一个隐含的属性，不能直接开启，我们可以通过一些特殊的方式开启 BFC：
- 设置元素浮动（不推荐）
- 元素设置为行内块元素（不推荐）
- 将元素的 overflow 设置为一个 非visible 的值
- 常用方式为元素设置 overflow:hidden; 开启 BFC，以使其可以包含浮动元素
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8">
<style>
.div1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: orange;
/* 开启BFC的元素不会被浮动元素所覆盖 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8">
<style>
.div1{
width: 200px;
height: 200px;
background-color: #bfa;
/* 开启BFC的元素子元素和外边距不会重叠 */
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8">
<style>
.outer{
border: 10px red solid;
/* 开启BFC的元素可以包含浮动的子元素 */
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.div1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="div1"></div>
</body>
</html>
三、clear属性
<!DOCTYPE html>
<html>
<head>
<title>clear属性</title>
<meta charset="utf-8">
<style>
div{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
/*
由于box1的浮动，导致box2的位置上移，
也就是box2受到了box1浮动的影响 ，位置发生了改变
如果我们不希望某个元素因为其它元素浮动的影响而改变位置，
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
- 作用：清除浮动元素对当前元素所产生的影响
- 可选值：
- left：清除左侧浮动元素对当前元素的影响
- right：清除右侧浮动元素对当前元素的影响
- both：清除两侧中最大影响的那侧
- 原理：
设置清除元素以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其它元素的影响
*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
四、解决方案
<!DOCTYPE html>
<html>
<head>
<title>高度塌陷</title>
<meta charset="utf-8">
<style>
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box1::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>高度塌陷</title>
<meta charset="utf-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
/* 这个样式可以同时解决高度塌陷和外边距重叠问题 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>