清除浮动
现象：设置多个块级元素为一行。
浮动是页面布局中的一种，但是浮动会使元素脱离文档流，而文档流中父元素默认会被子元素撑开，一旦子元素设置浮动，就无法撑开父元素的高度，随之产生高度塌陷问题。
什么是高度塌陷？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 200px;
background-color: darkblue;
border: 5px solid black;
}
.child{
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
.another{
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="another"></div>
</body>
</html>
上述加入float出现的情况即为高度塌陷问题。子元素脱离文档流，父元素高度塌陷，下方元素占据原本为父元素的位置。
清除浮动的方法
一、通过开启BFC（块级格式化上下文）
一旦开启BFC，就会包含有以下属性：
1.不会在垂直高度上产生边距重叠的情况。
2.不会被浮动元素覆盖。
3.可以包含浮动元素。
如何开启BFC？
4. 设置父元素为float，这也会造成高度塌陷。
5. 设置元素为绝对定位，这也会造成脱离文档流，形成高度塌陷。
6. 设置元素为inline-block，可解决高度塌陷问题。但是会丢失高度。
7. 设置父元素为 overflow : hidden
二、在高度塌陷的父元素后面添加一个空的div,并设置一个clear:both
<div style="clear: both;"></div>
三、给父元素设定高度（拓展性差）
四、通过给父元素::after伪元素来清除浮动（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 200px;
background-color: gray;
border: 2px solid darkorchid;
}
.child{
width: 100px;
height: 100px;
background-color: lightskyblue;
float: left;
}
.parent::after{
content: " ";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
五、br标签清除浮动
<div class="parent">
<div class="child"></div>
<br clear="all"/>
</div>
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
