1
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}
2
.clearfix:after {
display: block;
overflow: hidden;
content: "";
visibility: hidden;
clear: both;
height: 0;
}
.clearfix{
*zoom:1;
}
e.g: 開發(fā)常用第二種
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1{
width: 600px;
border: 1px solid red;
background: blue;
/*overflow: hidden;*/
}
.x1,.x2{
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
.cl{
/*clear: both;*/
}
/*.clearfix:before, .clearfix:after{*/
/*display: table;*/
/*content: '';*/
/*}*/
/*.clearfix:after{*/
/*clear: both;*/
/*}*/
/*.clearfix{*/
/**zoom:1;*/
/*}*/
.clearfix:after{
overflow: hidden;
visibility: hidden;
content: "";
height: 0;
display: block;
clear: both;
}
.clearfix{
*zoom:1;
}
</style>
</head>
<body>
<div class="p1 clearfix">
<div class="x1"></div>
<div class="x2"></div>
<div class="cl"></div>
</div>
</body>
</html>
Snip20170127_5.png
