清浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮动</title>
<style type="text/css">
.sup {
width: 300px;
background-color: orange;
}
.sub {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
font: 900 40px/100px 'STSong';
text-align: center;
}
.br {
width: 200px;
height: 200px;
background-color: pink;
}
.sub {
float: left;
}
/*清浮动的对象:用于浮动子级的父级 sup*/
/*① 设置自身高度*/
/*.sup {
height: 100px;
}*/
/*② 设置自身overflow: hidden*/
/*.sup {
overflow: hidden;
}*/
/*③ 设置兄弟标签的clear: left | right | both*/
/*.s2 {
float: right;
height: 50px;
}
.br {
clear: both;
}*/
/*④ 设置自身:after伪类*/
.sup:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 不完全脱离文档流 -->
<!-- 通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度 -->
<!-- 脱离文档流后的子级标签,不再撑开父级高度 -->
<!-- 不完全脱离文档流(浮动后的结果),不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度 -->
<!-- 清浮动本质:让父级获得合适的高度 -->
<div class="sup">
<div class="sub s1">1</div>
<div class="sub s2">2</div>
</div>
<div class="br"></div>
</body>
</html>
