<!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>div{
width:200px;
height:100px;
float:left;
}
.red{
background-color: red;
}
.green{
background-color:green;
}
.black{
background-color:black;
}
</style>
<body>
<div class="container clearfix">
<div class="red"></div>
<div class="green"></div>
<div class="black"></div>
</div>
<!-- 方法四 -->
<!--<div style="clear:both"></div>-->
<div>
浮动框测试 ...2
</div>
</body>
</html>
转载于:https://blog.51cto.com/antlove/1709056