CSS：解决高度塌陷的问题

高度塌陷

当父元素高度自适应时，其子元素浮动后，父元素的高度会变成0

解决方案

<div class="div1"> <div class="div2"><div> </div> 指定父元素高度 .div1{ height: 100px; border: 10px solid black; } .div2{ height: 50px; width: 50px; background-color: red; float: left; } 开启BFC（块级格式化上下文） 开启BFC的特点： a. 父元素的垂直外边距不会和子元素重叠 b. 开启BFC的元素不会被浮动元素所覆盖 c. 开启BFC的元素可以包含浮动的子元素

开启BFC的方式：

a. 设置父元素浮动 .div1{ border: 10px solid black; float: left; } b. 设置元素绝对定位 .div1{ border: 10px solid black; position: absolute/fixed; } c. 设置父元素为行内块元素 .div1{ border: 10px solid black; display: inline-block; } d. 设置父元素的overflow值为非visible .div1{ border: 10px solid black; overflow: hidden; } 添加空白元素 .div1::after{ content: ""; display: table; clear: both; }

IE6及以下

IE6及以下浏览器不支持BFC，使用hasLayout属性

.div1{ zoom: 1; }

总结

将高度塌陷和垂直外边距重叠的问题一起解决的方案如下

.clearfix{ zoom:1; } .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }