清除浮动的各种方式
CSS清除浮动的各种方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>建站学</title>
<style>
body, div, h2 {
margin:0;
padding:0;
font-size:12px;
font-family:arial;
line-height:1.8;
}
h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:20px;
font-weight:700;
}
.Container {
margin:30px auto;
width:600px;
overflow:hidden;
padding:20px;border:2px solid #000
}
.Code {
border:1px solid #fff;
margin:10px 0;
padding:10px;
background:#ccc;
}
.Boxer {
border:1px solid #ccc;
clear:both;
background:#f00;
}
.Sider {
float:left;
}
.Clear1 {
display:block;
clear:both;
line-height:0;
font-size:0;
height:0;
overflow:hidden;
}
.Clear2:after {
content:'.';
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.Clear2 {zoom:1;}
.Clear3 {
overflow:auto;
zoom:1;
}
.Clear4 {
overflow:hidden;
width:100%;
}
</style>
</head>
<body>
<h2>今天想对大家一直不太理解的浮动，做一个简单的教程，希望同学们通过我这个简单的教程，大概理解浮动以及清除浮动。</h2>
<h2>下次给大家写一些浮动引起的BUG，以及解决方法。</h2>
<div class="Container">
<div class="Code">
.Boxer {border:1px solid #ccc;clear:both;background:#f00;} .Sider {float:left;}
</div>
<div class="Boxer">
<div class="Sider">嗯，我是浮动的。未清除浮动之前。在除了IE6,7的浏览器中，此浮动元素父级，无法自适应高度。</div>
</div>
</div>
<div class="Container">
<div class="Code">
.Clear1 {display:block;clear:both;line-height:0;font-size:0;height:0;overflow:hidden;}
</div>
<div class="Boxer">
<div class="Sider">嗯，我是浮动的，这是一种清除浮动的方法，缺点是增加了一个dom元素来清除浮动</div>
<b class="Clear1">清除浮动</b> </div>
</div>
<div class="Container">
<div class="Code">
.Clear2:after {content:'.';display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .Clear2 {zoom:1;}
</div>
<div class="Boxer Clear2">
<div class="Sider">嗯，我是浮动的，这种是另一种清除浮动的方法，使用率较高，是用了css选择器中的:after伪类，此伪类在IE6，7中无法识别。注意，此方法的样式必须在浮动元素的父级元素中使用。增加zoom:1属性，是在IE6中适用，消除hashlayout</div>
</div>
</div>
<div class="Container">
<div class="Code">
.Clear3 {overflow:auto;zoom:1;}
</div>
<div class="Boxer Clear3">
<div class="Sider">嗯，我是浮动的，这种是另一种清除浮动的方法，使用率也不错，用的overflow:auto的方式。注意，此方法的样式必须在浮动元素的父级元素中使用。增加zoom:1属性，是在IE6中适用，消除hashlayout</div>
</div>
</div>
<div class="Container">
<div class="Code">
.Clear4 {overflow:hidden;width:100%;}
</div>
<div class="Boxer Clear4">
<div class="Sider">嗯，我是浮动的，这种是另一种清除浮动的方法，使用率也不错，用的overflow:hidden;+定宽的方式。注意，此方法的样式必须在浮动元素的父级元素中使用，并且给父级定宽、不一定非得100%。</div>
</div>
</div>
</body>
</html>