三、说一说产生塌陷的原因以及清除浮动的几种方法 · 40个JavaScript面试必考点

## 一、什么是高度塌陷在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的，即子元素多高，父元素就有多高。但是当子元素设置浮动之后，子元素就会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级元素的高度变为0了，下面的元素会上去，这样会导致页面布局混乱。 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> .parent { width: 300px; border: 5px solid #f00; } .child { float: left; width:100px; height: 100px; border: 5px solid #00f; } ``` ## 二、解决方法 #### 1、父元素结束之前添加一个标签 `<div style="clear:both;"></div>` ``` <div class="parent"> <div class="child"></div> <div class="child"></div> <div style="clear:both;"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 200px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺点：增加了无意义的标签 #### 2、让父元素本身也浮动 float：left; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { float: left; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺点：虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响 #### 3、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { height: 100px; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺点：父元素与子元素的边框会重叠，无法自适应子元素的高度 #### 4、给父元素设置display: inline-block; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { display: inline-block; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺点：会导致父元素的宽度丢失，与相邻元素会产生额外的间距 #### 5、给父元素设置 overflow : hidden; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { overflow: hidden; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺点：要是子元素要margin负值定位或是负的position定位，溢出部分会被裁掉，如二级菜单的影响 #### 6、通过after伪类，after + zoom方法（推荐） ``` <div class="parent clearAll"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } .clearAll:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clearAll { zoom : 1; } ``` 利用伪类来清除浮动，其效果跟创建一个空的div并设置其为 clear：both 是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。