按照CSS规范,浮动元素(float)后会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列,所以不会撑开父元素的高度。但是很多时候我们需要页面根据内容自动调整高度的。如何解决这个问题呢?有6个方法:
(1)在浮动子元素后面添加
<div style="clear:both;"></div>
(2)父元素CSS添加
z-index:1; overflow:hidden;
(3)绝对定位/静止定位(absolute/fixed)。
(4)父元素也跟着浮动。
(5)父元素设定高度。
这个是掩耳盗铃的方法,实质上并没有解决问题,但效果看起来是一样的,如果父元素高度固定,可以用这个方法。
(6)父元素CSS添加:
overflow:auto;_height:1%;
这个是我认为是最佳方案。