问题阐述
众所周知，当使用float布局时，经常会出现父元素高度塌陷的问题，例如：
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
当子元素one和子元素two都使用flex:left时，父元素container的高度为0。要想使父元素包裹子元素，则需要清除浮动。
解决方法
1.创建一个空的div，在该div上设置样式clear:both
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
</body>
</html>
2.给父元素添加一个伪类选择器
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
}
.container::after{
content:"";
visibility:hidden;
display: block;
height:0;
clear:both;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
3.父元素上也使用float
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
float:left;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
4.父元素上使用overflow:auto
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
overflow: auto;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
5.父元素上使用display:table
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
display:table;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
6.父元素上使用position:absolute
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.container{
width:400px;
background-color:orange;
position:absolute;
}
.one{
width:100px;
height:200px;
background-color: lightblue;
float:left;
}
.two{
width:200px;
height:100px;
background-color: lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
总结
方法1、方法2使用的是clear:both来清除浮动，而方法3、方法4、方法5、方法6是通过生成一个BFC来清除浮动。
触发BFC的条件
- 根元素
- float （left，right）
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block)
- position（absolute，fixed）
