HTML div float 背景问题

Question

例如，我在这样的 div 中有 2 个 div

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
</div>

现在我的问题是，如果绿色 div 的高度为 300 像素，为什么我在 ref 下方看不到黑色背景。

Answer 1

如果使用 float: ...;

，文本流将被“终止”

您可以做的是说出文本流应该在具有 float 属性和“clear”属性的元素之后的位置。

你可以这样做:

<div style="width: 300px; backround-color: #000000;">
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div>
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div>
    <div style="clear: both;"></div>
</div>