1 盒子塌陷的原因

什么是盒子塌陷？

外部的盒子没有包裹住内部的浮动盒子，导致了盒子塌陷。

盒子高度塌陷原因？

①父元素没有设置高度（height）；

②且其子元素脱离了文档流，导致内部没有元素可以撑起当前父元素：

a. 内部子元素使用了浮动导致内部元素脱离了文档流，且脱离文档流的元素无法撑起当前父元素。
b. 内部子元素使用了绝对定位或者固定定位脱离文档流。

示例：设置一个父div和一个子div，首先不设置父盒子的高度，给父盒子设置宽度，然后为子盒子设置宽度和高度

<divclass="father"><divclass="child"></div></div><style>.father{width: 200px;background-color: pink;}.child{width: 100px;height: 80px;background-color: orange;}</style>

在上面的例子中，由于父盒子没有设置高度，因此高度是子盒子的高度。那么如果给子盒子添加浮动属性，就会造成高度塌陷：

.child{width: 100px;height: 80px;float: left;background-color: orange;}

2 如何清除塌陷

1、将盒子大小写死，给每个盒子设定固定的width和height，直到合适为止。

优点：简单方便；
缺点：非自适应，浏览器的窗口大小直接影响用户体验。

2、给外部的父盒子也添加浮动，让其也脱离标准文档流。

优点：方便；
缺点：对页面的布局不是很友好，不易维护。

因此在上面的例子中，同时为父盒子和子盒子添加浮动，也会显示完整的效果：

<divclass="father"><divclass="child"></div></div><style>.father{width: 200px;background-color: pink;/* 为父盒子添加浮动 */float: left;}.child{width: 100px;height: 80px;float: left;background-color: orange;}</style>

3、给父盒子添加overflow:auto;或者overflow:hidden;。

优点：浏览器支持好，简单；
缺点：当子元素有定位属性时overflow:auto;有可能出现滚动条，影响美观。overflow:hidden;可能会带来内容不可见的问题。

4、父盒子里最下方引入清除浮动块

<divstyle="clear:both"></div>

优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：引入了不必要的冗余元素 。

因此上面的例子中，可以在子盒子下面添加一行代码，解决盒子塌陷：

<divclass="father"><divclass="child"></div><!-- 添加清除浮动块 --><divstyle="clear:both"></div></div><style>.father{width: 200px;background-color: pink;}.child{width: 100px;height: 80px;background-color: orange;float: left;}</style>

5、为外部盒子添加after伪类，设置clear属性清除浮动（主流）。

父盒子::after{content:"";/* 清除两边的浮动 */clear: both;/* 也可以使用display:table; */display: block;/* 兼容IE浏览器 */zoom: 1;}

优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

在本例中，为父盒子写入伪类清除浮动：

<divclass="father"><divclass="child"></div></div><style>.father{width: 200px;background-color: pink;}.child{width: 100px;height: 80px;background-color: orange;float: left;}/* 添加伪类清除浮动 */.father::after{content:"";clear: both;display: block;zoom: 1;}</style>