在设计网页布局时，一定会使用到浮动，但是在使用的过程也会发生一个问题，那就是父元素塌陷问题，先来看一段代码：
<!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; }
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
