父元素高度塌陷的原因：在没有设置高度的父元素内，子元素全部设置浮动以后，子元素脱离文档流，不在占有文档流的位置，因此父元素高度塌陷，对后面的元素排版将产生影响。
方式一：额外标签法
在父元素的后面添加一个空的块元素标签，并对这个空的块元素标签清除对他影响最大浮动。但是这种方法增加了无用的标签并且与结构与样式相分离的宗旨相违背。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>额外标签法</title>
<style type="text/css">
.father{
border: 2px solid red;
}
.son{
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="clear"></div>
</div>
</body>
</html>
方法二：给父元素添加overflow属性，属性值设置为hidden、auto或者scroll。
方法二书写方便，并且结构与表现也实现了分离。但是父元素中多处的内容将会hidden，给布局造成非常大的影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
.father{
border: 2px solid red;
/* 给父元素设置overflow属性值为hidden、auto或者scroll便可以了。 */
overflow: hidden;
}
.son{
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法三： ：after伪元素法
方法三是额外标签发的升级版，只需要给父元素设置如下代码就可以了，并且要考虑到兼容ie6.核心思想并没有什么区别。但方法三完美的是想了结构与表现分离，是开发中最常用的方式。
关键代码如下：
.clearfix::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* 兼容ie6 */
*zoom: 1;
}
方法四：双伪元素清除浮动
与方法三一样也是对父元素添加css代码。
关键代码如下所示：
.clearfix::after,clearfix::before{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix{
/* 兼容ie6 */
*zoom: 1;
}
4659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
