CSS очистить как внутри детей

Question

У меня проблемы с этим вопросом в течение длительного времени.Я считаю, что это довольно распространенная проблема для разметки с плавающей точкой, и я хотел бы, чтобы кто-то дал «стандартное» решение.Рассмотрим следующую простую компоновку:

<div class='parent clearfix'>
     <div id='child1' style='float:left; width:500px'>
         { ... child 1 content goes here ... }
     </div>
     <div id='child2' style='margin-left:501px;'>
         { ... child 2 content goes here ... }
     </div>
</div>

Здесь clearfix - это распространенный метод автоматической очистки плавающих дочерних элементов.Проблема в том, что макет не работает, если child2 содержит еще один элемент clearfix .Например, если дочерний контент 2:

<div class='inside clearfix'>
    <div class='sub1' style='float-left; width:100px'> 
        { ... extra content goes here ... } 
    </div>
    <div class='sub2' style='margin-left:101px'> 
        { ... extra content goes here ... } 
    </div>
</div>

Так, в общем случае, если мы используем clear: оба внутри плавающего макета (внутри не плавающего элемента), он также очищает родительский контейнер.

Я знаю, как это сделать, если использовать абсолютную позицию и немного js, но это не очень хорошая практика.

Как исправить это с помощью float ?

Спасибо!

Answer 1

вы также можете использовать переполнение: скрыто;

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

проверить демо на jsfiddle

Answer 2

При работе с float я следую более простому подходу, используя дополнительный div с классом clear. Это намного проще, понятно и менее подвержено ошибкам.

Вот что я делаю:

<div class="parentClass">
    <div class="float1">
    . . .  
    </div>
    <div class="float2">
    . . .
    </div>
    <div class="clear"></div>
</div>

В CSS класс clear выглядит следующим образом:

.clear { clear:both; overflow:hidden; }

Вы можете попробовать этот подход, и я уверен, что все пойдет хорошо. Желаем удачи!