清除浮动的原因
蓝色 Div 是正常流，其他的浮动在 蓝色 Div 上面，
这样需要严格控制蓝色Div 的高度。
<head>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
}
.box {
/* 不指定父元素的高度 */
width: 600px;
height: 400px;
background-color: #00FFFF;
margin: auto;
}
.left {
float: left;
width: 180px;
height: 400px;
background-color: #7FFFD4;
}
.right li {
float: left;
width: 95px;
height: 195px;
margin-left: 10px;
margin-bottom: 10px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<ul class="right">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
取消父容器的高度
s清除浮动
这是最常用清除浮动的方法，只需要在父元素
class里面添加就好了。
方式一
使用 after 伪元素清除浮动
/* 清除浮动 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* ie 6 7 专门清除浮动的 */
.clearfix {
*zoom: 1;
}
方式二
使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6，7 专用方法 */
.clearfix {
*zoom: 1;
}
还有其他的方法，自行网上查看
版权声明：《 CSS3 之 清除浮动 》为明妃原创文章，转载请注明出处！
最后编辑:2020-4-27 10:04:01