高度塌陷问题： 当子元素设置浮动后，子元素脱离文档流，不占据原来的位置，原位置不保存，因此父元素的高度塌陷，后面在文档流中的元素会往上走，此为高度塌陷问题。 解决办法： - 浮动元素的父元素加高（高度已知） - 浮动元素的父元素加overflow:hidden|auto 自动找回高度，当子元素溢出时，他会被隐藏 - 浮动元素的父元素加浮动，开启BFC - 受影响的元素加clear:both - 空div法 创建一个div，给其设置属性为clear:both - 伪对象法
<div class="container clearfix"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="clear"></div> <div class="inner"></div> <style> .container{ border: 10px solid #ccc; /*overflow: auto;*/ /*float: left;*/ } .container>div{ width: 25%; height: 100px; background-color: #bfa; text-align: center; line-height: 100px; font-size: 3em; float: left; } .container>div:nth-child(2n){ background-color: yellow; } .inner{ width: 200px; height: 200px; background-color: deepskyblue; /*clear: both;*/ } .clear{ clear: both; } .clearfix::before,.clearfix::after{ content:""; display:table; clear:both; } </style>