清除浮动
什么是清除浮动
当容器的高度为auto,且容器中的内容存在浮动元素时,容器的高度会不能自动拉升以适应内容的高度(高度塌陷),使得内容溢出到容器外面而影响布局的现象叫做浮动溢出。为了防止该现象的发生而进行的css处理,叫做css清除浮动。
浮动溢出的示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
border:5px solid #ddd;
}
.child{
float: left;
width: 50px;
height:50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
子div并没有撑起父div的高度,导致父div的高度塌陷,这就是浮动溢出。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能的窄。
清除浮动的方法
- 使用带有clear属性的空元素(在浮动元素后使用一个空元素,并设置clear:both;属性。)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
border:5px solid #ddd;
}
.child{
float: left;
width: 50px;
height:50px;
background-color: red;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="clear"></div>
</div>
</body>
</html>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
2. 在浮动元素的容器上使用:after伪类
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
border:5px solid #ddd;
}
.child{
float: left;
width: 50px;
height:50px;
background-color: red;
}
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child"></div>
</div>
</body>
</html>
优点:浏览器支持好
缺点:代码多,可以定义公共类以减少css代码
3. 直接给父元素定义一个高度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
border:5px solid #ddd;
height:50px;
}
.child{
float: left;
width: 50px;
height:50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
优点:简单,代码少
缺点:局限性大,只适合高度固定的布局
4. 触发BFC
由于BFC在计算高度的时候,浮动元素也会参与计算,所以通过触发BFC也能够解决问题。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin:0;
}
.parent{
border:5px solid #ddd;
overflow:hidden;
}
.child{
float: left;
width: 50px;
height:50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
优点:简单,代码少
缺点:可能产生新的问题