核心提示：!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8title/title/head style/* 方法一 *//*.clearfix{overflow:h...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 方法一 */
/*.clearfix{overflow:hidden;_zoom:1;}*/
/* 方法二 */
/*.clearfix{overflow:auto;_height:1%}*/
/* 方法三 */
/*.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}*/
/*.clearfix{*+height:1%;}*/
.container>p{
width:200px;
height:100px;
float:left;
}
.red{
background-color: red;
}
.green{
background-color:green;
}
.black{
background-color:black;
}
</style>
<body>
<p class="container clearfix">
<p class="red"></p>
<p class="green"></p>
<p class="black"></p>
</p>
<!-- 方法四 -->
<!--<p style="clear:both"></p>-->
<p>
浮动框测试 ...2
</p>
</body>
</html>
