плавающий div внутри другой плавающей div-проблемы

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>

Блок 2 отображается в браузерах как часть блока 1, в блоке 3 и 4. В чем проблема?

Answer 1

div s не являются самозакрывающимися тегами (такими как <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

Попробуйте закрыть div после блока 4 следующим образом:

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