一次使用float和inline-block

Question

你能不能向我解释一下如果将display:inline-block添加到父元素会对它们已经浮动的孩子产生影响？

正如你可以see in the jsfiddle example，包含元素似乎没有看到它'浮动的孩子（据我所知，这是浮动的正常效果）。但是当你将display:inline-block添加到包含元素时，它的'边框在浮动元素周围变得可见。这会将它们带回正常的文档流程吗？它如何影响元素定位？

Answer 1

尝试：

overflow:hidden;将保持包装器的高度。

#wrap {
    overflow:hidden;
}

Fiddle here.

OR

清除漂浮物。

.clr{clear:both;}

Fiddle here.

Answer 2

浮标是浮点数，块是块。

当容器具有display:block（div默认行为）时，它将尽可能地拉伸其宽度，并且不允许靠近它的元素，仅在上方或下方。

浮动元素将浮动在它们的位置上。如果容器是block，它们可能有更多的空间可以拉伸。

与inline-block容器不同，它只需要所需的宽度，并且不会尽可能延伸。

希望有所帮助。