Question

我有浮动div的问题。

当前的html标记：

<div>
    <div style="float: left;">
        1
        <div style="float: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;" />
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;" />
</div>

Block 2作为Block 1的一部分出现在Block 3和Block 4下。问题是什么？

Answer 1

div不是自我关闭的代码（例如<br />和<hr />以及<img />），并且以您的方式关闭它们，不会真正关闭它们！！实际上，您的代码应如下所示：

<div>
    <div style="float: left;">
        1
        <div style="float: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;"></div>
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;"></div>
</div>

Answer 2

尝试以这种方式在第4块之后关闭div：

<div style="clear: both;"></div>

在另一个浮动的div问题中浮动div

2 个答案: