Question

父元素由于子元素使用float而无法自适应高度

Answer 1

本文介绍由于子元素使用 float 导致父元素无法自适应子元素的高度的解决方法。

正常情况下，父元素不需要设置高度也可以自适应子元素的高度，举个例子，很简单的一个结构：

我们不给父元素设置高度：

效果如下：

父元素的高度消失了：

这是因为加了浮动以后元素会脱离标准的文档流，破坏inline-box，造成的后果就是没有高度，所以父元素无法获取子元素的高度，自然也无法自适应高度。

接下来介绍解决子元素浮动以后父元素自适应高度的方法：

如果在确定知道子元素高度的情况下，可以直接给父元素设置高度：

这样虽然父元素没有被子元素撑起来高度，但也可以把子元素包住：

但是这样虽然可以解决问题，但也不是自适应高度啊，而且如果子元素高度不一定，这种办法也不是很好，接下来介绍方法二。

在父元素的样式中设置 overflow 属性，可以是 hidden 或者是 auto ，都可以达到自适应设置了浮动的子元素高度：

父元素设置了 overflow 属性以后，不论子元素高度是多少，父元素都可以自适应高度：

既然父元素高度消失是由于浮动造成的，那么我们清楚浮动不就可以了。我们在父元素结束标签 </div> 前加入一个子元素，给它设置 class 为 clear ：

然后给该元素添加一个清除浮动的样式：

这样子就可以实现清除浮动，也可以达到父元素自适应子元素高度的效果：

浮动说简单不简单，说难也不难，还是要平时多写多积累啊。