Как переполнение: скрытый работает, чтобы обернуть вокруг плавающих элементов?

Question

Я немного запутался, когда использовал overflow: hidden, чтобы убедиться, что родительский элемент охватывает другие элементы.Я всегда использовал ясно: оба;div, чтобы сделать это, но это не имеет большого смысла семантически.Может кто-нибудь объяснить, как переполнение: скрытый родительский div делает это волшебство?И когда мы должны предпочесть эту технику ясному: оба метода?

Ура!

Answer 1

Переполнение всего, кроме видимого, создает новый контекст форматирования блока, который очищает значения с плавающей точкой.

Answer 2

Когда мы используем float: left, проблема в том, что, когда для следующего элемента достаточно места, он будет располагаться рядом с плавающим элементом, чтобы избежать использования clear: оба

например:

<style>
#wrapper{
width:500px;
}

#one{
width:100px;
float:left;
}

#two{
width:100px;
float:left;
}

#three{
width:100px;
}

.clearfix{
clear:both;
}

</style>


<div id="wrapper">
   <div id="one"></div>
   <div id="two"></div>
   <div id="three"></div>
</div>

В приведенной выше ситуации всего 500px места из этого, два div заняли 200px пространства, остальное 300px и dv three - всего 100 px.Таким образом, разделение на три будет идти рядом с разделением на два, так как места достаточно.Чтобы избежать этого, просто поставьте div с clear: оба после div два

<div id="wrapper">
   <div id="one"></div>
   <div id="two"></div>
   <div class="clearfix"></div>
   <div id="three"></div>
</div>