css清除浮動
清除浮動的方法:
方法一:給浮動元素的父親元素添加屬性:overflow: auto;
<style type="text/css">
*{padding:0;margin:0;}
.clearfix{
border: 3px solid green;
width: 200px;
overflow: auto;//這裏是關鍵
zoom: 1;//可以支持IE6
}
.left{
width: 100px;
height: 100px;
float:left;
background: red;
}
.right{
width: 100px;
height: 100px;
float:left;
background: #000;
}
</style>
</head>
<body>
<section class="clearfix">
<div class="left"></div>
<div class="right"></div>
</section>
方法二:運用after偽類
<section class="clearfix">
<div class="left"></div>
<div class="right"></div>
</section>
.clearfix:after{
content:".";
display: block;
clear: both;
height: 0;
line-height:0;
font-size: 0;
visibility: hidden;
}
.clearfix{
zoom: 1;
}
css清除浮動