为什么容器div没有包装子div(溢出容器)

时间:2015-07-25 03:06:26

标签: html css

我正在尝试将标题和描述放在一个将包装它们的div中。我<div class="category_border">包围了标题和描述,但由于某种原因,他们已经失去了它。我创造了一个小提琴来帮助展示它的作用。为什么他们不属于<div class="category_border">

https://jsfiddle.net/0vkzoxm3/

1 个答案:

答案 0 :(得分:1)

overflow: auto添加到.category_border类。

这是您更新的演示:
https://jsfiddle.net/0vkzoxm3/3/

您的标题和说明溢出包含div的原因是因为它们都使用float: left进行样式设置。浮动元素时,它会从正常流中取出。因此,就容器div而言,它们并不存在。

答案是&#34;清除&#34;花车。有很多方法可以做到这一点。一种方法是将overflow: auto添加到容器中。这会强制容器扩展到浮动元素的高度。

如果你对此感兴趣,可以多说一点:

Clearing Floats: An Overview of Different clearfix Methods

How Floats are Positioned

祝你好运!

相关问题