高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.box {
width:100%;
background-color:pink;
}
.item {
width:200px;
height: 200px;
background-color:yellow;
float: left;
}
.itemTwo{
background-color:skyblue;
margin-left: 100px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item itemTwo"></div>
</div>
</body>
</html>
- 给父元素单独定义高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box {
width:100%;
background-color:pink;
height: 200px;
}
.item {
width:200px;
height: 200px;
background-color:yellow;
float: left;
}
.itemTwo{
background-color:skyblue;
margin-left: 100px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item itemTwo"></div>
</div>
</body>
</html>
优点：快速简单，代码少 缺点：无法进行响应式布局
- 父级定义overflow：hidden；zoom：1（针对ie6的兼容）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box {
width:100%;
background-color:pink;
overflow: hidden;
zoom: 1;
}
.item {
width:200px;
height: 200px;
background-color:yellow;
float: left;
}
.itemTwo{
background-color:skyblue;
margin-left: 100px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item itemTwo"></div>
</div>
</body>
</html>优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时要注意
- 在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box {
width:100%;
background-color:pink;
}
.item {
width:200px;
height: 200px;
background-color:yellow;
float: left;
}
.itemTwo{
background-color:skyblue;
margin-left: 100px;
}
.emptyLabel{
clear: both;
height: 0;
overflow: hidden;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item itemTwo"></div>
<div class="emptyLabel"></div>
</div>
</body>
</html>优点：简单快速、代码少，兼容性较高。缺点：增加空标签，不利于页面优化
- 父级定义overflow：auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box {
width:100%;
background-color:pink;
overflow: auto;
}
.item {
width:200px;
height: 200px;
background-color:yellow;
float: left;
}
.itemTwo{
background-color:skyblue;
margin-left: 100px;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="item itemTwo"></div>
</div>
</body>
</html>优点：简单，代码少，兼容性好。 缺点：内部宽高超过父级div时，会出现滚动条
- 万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
background-color: pink;
}
.item {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.itemTwo {
background-color: skyblue;
margin-left: 100px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
</style>
<body>
<div class="box clearfix">
<div class="item"></div>
<div class="item itemTwo"></div>
</div>
</body>
</html>优点：写法固定，兼容性高 缺点：代码多
