<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.container{
width:800px;
border: 1px solid;
margin:10px auto;
/*// 第一种在父级元素上添加overflow:hidden*/
overflow: hidden;
}
.common {
width: 190px;
height: 100px;
border: 1px solid palevioletred;
float: left;
}
/*}*/
/*第二种:在父级元素上添加伪类*/
.container:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.container{zoom:1} //IE特有属性
</style>
</head>
<body>
<div class="container">
<div class="common">1</div>
<div class="common">2</div>
<div class="common">3</div>
<div class="common">4</div>
<!--在父元素内的最后一个子元素上添加clear:both-->
<div style="clear: both;"></div>
</div>
</body>
</html>
注意：单引号和双引号
:after(兼容IE8）
::after（不需兼容IE8）
![[CSS]CSS浮动float详解（二）：使用floatfloat属性[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)