单伪元素清除、双伪元素清除浮动
<style>
.father{
border: 1px solid black;
*zoom: 1;
}
/* .clearfix:after,.clearfix:before{ //双伪元素清除
content: "";
display: block;
clear: both;
} */
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法 单伪元素清除*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
.footer {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>