Question

我在互联网上遇到了以下代码。它有效，但我不知道它的工作原理是什么？所有div框都进入容器div，当最后添加一个清除两个属性的虚拟div时，否则它们会留在容器外面。我自己得到的另一件事是当clear设置为left时它仍然正常工作。

HTML

<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div style="clear: both;"></div>
</div>

CSS

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}

Answer 1

1。我们经常读到a float is not in the flow。这种行为的一个副作用是浮动元素不会影响其父级的高度。您观察到 [浮动元素]停留在容器外有些不正确;浮动元素保留在容器内，但容器的高度为0，因此这些元素在外部呈现。

2. clear property表示清除元素的左侧，右侧或两侧不允许浮动元素。在浮动元素之后添加已清除元素时，它会被推到它前面出现的所有左和/或右浮动元素下方以满足条件。（请记住：左浮动元素允许内容沿其右侧流动;右浮动元素允许内容围绕其左边缘流动;清除的内容绕过此功能）。

已清除的元素仍然是一个in-flow元素，当它被按下时将会拉伸父元素。

清晰财产的怪异行为

1 个答案: