div 的文本内容周围没有浮动框

Question

我有三个块元素，三个div，但第一个是浮点元素，因此浮点元素的行为就好像它不存在一样，因此第二个div与浮点元素重叠，但框的文本内容(第二个div(驯服浮点元素的一些记忆，应该缩短为浮点元素腾出空间，而不是这种情况发生。实际上，文本换行，第二个框叠加到第一个浮点框。 我不明白这种行为的原因

.box {
border: thick solid red;
width: 400px;
height: 400px;
background-color: yellow;
}
.box:first-child {
float: left;
}

<!-- Essendoci sovrapposizione tra il primo e il secondo div ed anche opacita
	 il primo div(sovrapposto al secondo) appare di un colore diverso del terzo. 
-->
<div class="box">
First element
</div>
<div class="box">
Second element
</div>
<div class="box">
Third element
</div>

Answer 1

您可以使用 clearfix css hack 来防止清除浮动：

https://jsfiddle.net/0ce26f7d/14/

.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}