并排的divs

Question

我在父div中有4个div.为了让它们并排出现,我给了所有4个div一个带浮动的样式:左边.div确实并排显示,但父div的高度不会增长到包含子div的高度.我错过了什么？

Answer 1

这是浮动元素实现的一个怪癖,当你有一个父元素只包含浮动子元素时,会发生这种情况.有两种方法可以解决它.一种是将父元素的overflow属性设置为hidden,有时称为溢出方法.另一种称为clearfix方法,涉及:after伪类的使用.

clearfix方法的优点是允许特定定位的元素在父容器外部"挂起",如果你需要它们,可能需要额外的CSS和标记.这是我喜欢的方法,因为我经常使用悬挂元素.

Answer 2

4个div之后，需要“取消”浮动样式。这是通过创建 ap 来完成的，例如：<p style="clear: both"></p> 您的父 div 将自动获得正确的大小。