лимит с плавающей точкой div очищает с точностью до вложенного div

Question

У меня есть два столбца div (ColumnA и ColumnB) внутри DivP MasterParent. Эти два столбца используют float: left. Без проблем. работает.

Теперь внутри ColumnB я хочу еще 3 отдельных столбца (Column1,2,3).

Я плаваю в столбце 1, 2, 3, все влево, чтобы они встали вместе, но когда я иду, чтобы начать новую строку и очистить плавающие в предыдущем столбце, он очищается до MasterParent и сбрасывает следующую строку ниже горизонтали. Положение нижней части колонны.

Есть ли способ очистить только через ColumnB, а не до DivP MasterPArent?

Answer 1

Вы не можете ничего очистить, и добавьте overflow: hidden к вашему DivP MasterParent.Проверьте это jsFiddle .

Вот код:

.Container
{
    overflow: hidden;
}
.Col1
{
    float: left;
    width: 50%;
}
.Col2
{
    float: left;
    width: 50%;
}
.Col2a
{
    float: left;
    width: 33%;
}
.Col2b
{
    float: left;
    width: 33%;
}
.Col2c
{
    float: left;
    width: 33%;
}

<div class="Container">
    <div class="Col1">
        <p>Column 1</p>
    </div>
    <div class="Col2">
        <p>Column 2</p>
        <div class="Col2a">2a</div>
        <div class="Col2b">2b</div>
        <div class="Col2c">2c</div>
    </div>
</div>