- 给父集元素使用overflow:hidden; bfc
如果有内容出了盒子，不能使用这个方法。
.clearfix:after{
content:".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear:both;
}
/*兼容ie浏览器*/
.clearfix{
zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header,.main,.footer{
width: 500px;
}
.header,.footer{
height: 100px;
background: pink;
}
.main{
background: blue;
/*overflow: hidden;*/
}
.left,.right{
width: 100px;
height: 300px;
}
.left{
background: orange;
float: left;
}
.content{
width: 300px;
height: 300px;
background: yellow;
float: left;
}
.right{
background: green;
float: right;
}
.content-top,.content-bot{
height: 150px;
}
.content-top{
background: #660000;
}
.content-bot{
background: #000066;
}
.clearfix:after{
content:".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear:both;
}
/*兼容ie浏览器*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main clearfix">
<div class="left"></div>
<div class="content">
<div class="content-top"></div>
<div class="content-bot"></div>
</div>
<div class="right"></div>
<!--<div style="clear: both"></div>-->
</div>
<div class="footer"></div>
</body>
</html>
.clearfix:before, .clearfix:after {
content: “”;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;/*IE678*/
}
清除浮动
网友评论