html - 一次使用 float 和 inline-block

Question

您能否向我解释一下添加display:inline-block父元素如何影响其子元素，当它们已经浮动时？

正如您在 jsfiddle 示例中看到的那样，包含元素似乎看不到它的浮动儿童（据我所知，这是浮动的正常效果）。但是当你添加display:inline-block到包含元素时，它的边框在浮动元素周围变得可见。这是否使他们回到文档的正常流程？它如何影响元素定位？

score 0 · Accepted Answer

尝试：

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

#wrap {
    overflow:hidden;
}

或者

清除浮动。

.clr{clear:both;}

score 0 · Accepted Answer

浮动是浮动，块是块。

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

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

不像inline-block容器，它只需要它需要的宽度，并且不会尽可能地伸展。

希望有帮助。

2 回答 2