父元素没有设置高度时,子元素浮动,父元素会出现高度坍塌。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 5px solid #000;
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
解决方法
- 当知道子元素高度时可以给父元素设置高度;
- 使用伪元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{/*清除浮动*/
content: "";
display: block;
clear: both;
}
.box{
border: 5px solid #000;
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3. 额外标签法
在最后一个浮动元素后加一个空div,给其设置clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 5px solid #000;
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
.box .none{
clear: both;/*清除浮动*/
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="none"></div>
</div>
</body>
</html>
缺点:如果浮动多的话,会增加许多空标签,会比较麻烦
4. 给父元素添加overflow属性
i.父级div定义overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 5px solid #000;
overflow: hidden;/*浮动清除*/
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
使用overflow:hidden时,触发BFC,浏览器会自动检查浮动区域的高度。
缺点:不能和position配合使用,因为超出的部分会被隐藏
ii.父级div定义overflow:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 5px solid #000;
height: 300px;
overflow: auto;/*浮动清除*/
}
.box .left{
background-color: red;
width: 100px;
height: 500px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 500px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div style="width: 100%; height:100px; background-color: yellow;float: left;"></div>
</div>
</body>
</html>
浏览器会自动检查浮动区域的高度。内部宽度超过父级div时会出现滚动条,如果需要出现滚动条或确保不会出现滚动条时可以使用。
5.以浮制浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 5px solid #000;
float:left;/* 让父元素也浮动起来*/
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
所有元素都浮动变成一个整体,但这样可能出现新的浮动问题,只做了解。
6.br清除浮动
<style>
.box{
border: 5px solid #000;
}
.box .left{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.box .right{
background-color: green;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<br clear="both">
</div>
</body>
</html>
感觉和额外标签法差不多
7.使用双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
不太清楚和上面的使用伪元素有什么区别