css如何利用:after清除浮动-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

方法：首先使用“父元素:after{content:'';display:block;}”语句在父元素底部插入并显示一个空的元素块；然后给该元素块添加“clear:both;”样式即可清除所有浮动。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

什么时候需要清除浮动？清除浮动有哪些方法？

1、对元素进行了浮动（float）后，该元素就会脱离文档流，浮动在文档之上。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float主要流行与页面布局，然后在使用后没有清除浮动，就会后患无穷。

先看实例：

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }