在设计网页布局时，一定会使用到浮动，但是在使用的过程也会发生一个问题，那就是父元素塌陷问题，先来看一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.container{
border:3px solid black;
width:400px;
}
div.container .left{
width:200px;
height:200px;
background:red;
float:left;
}
div.container .right{
width:200px;
height:200px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 
从上面显示的图片中可以看出，给父元素设置的边框都重叠在了一起，如果父元素不包含任何的可见背景，这个问题会很难被注意到。当我们给其子元素设置float属性之后，子元素脱离了父元素的层面（即不在同一层面上），且父元素并未设置高度，从而导致了父元素高度塌陷。
解决办法：1.设置父元素的高度
2.清除浮动
3.父元素也设置float属性，使父元素再次和子元素处在同一层面上
4.给父元素设置overflow:hidden（overflow:hidden属性也是css中比较奇怪的特性，它会强制父级元素扩大到包含浮动元素）
提示：清除浮动一般有两种方法，第一种是在最后一个子元素的后面添加一个div并设置CSS属性clear：both，第二种是利用CSS中的伪类，具体如下：
.clearfix:after{
content:'';
display:block;
height:0;
font-size:0;
clear:both;
overflow:hidden;
}
2530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
