清除浮动
2019-12-06 本文已影响0人
Dxes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.清除浮动指的是清除因为浮动而产生的高度塌陷的问题。
2.高度塌陷: 如果父标签没有设置高度，并且没浮动，子标签浮动的时候就会出现高度塌陷的问题
3.清除浮动的三种方法:
1)空盒子法: 在高度会塌陷的标签的最添加一个空的div，并且设置这个空的div的clear属性为both
2)方法二: 设置高度会塌陷的标签的overflow属性为hidden
-->
<style type="text/css">
/*2)方法二*/
/*.height{
overflow: hidden;
}*/
/*3)万能清除法*/
.height:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.height{
zoom: 1;
}
</style>
<div style="background-color: red; height: 200px;"></div>
<div style="background-color: green;" class="height">
<div id="" style="background-color: yellow; height: 200px; width: 30%; float: left;">
</div>
<div id="" style="background-color: deeppink; height: 100px; width: 20%; float: right;">
</div>
<!--1)空盒子法-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="background-color: blue; height: 150px;"></div>
</body>
</html>
