'clear:both”样式属性如何影响元素定位？

了解“clear:both”样式的影响

在 Web 开发中，控制页面上元素的位置至关重要。在这方面发挥重要作用的一个基本样式属性是“clear:both”。

什么是“clear”？

“clear”属性控制如何元素与其前面的浮动元素交互。当某个元素设置为“clear:both”时，它会强制该元素落在同一父容器内的所有浮动元素下方。这意味着该元素将出现在 HTML 源代码中位于其之前的所有浮动元素下方。

“clear:both”如何工作

了解如何“ clear:both" 有效，请考虑一个示例：

<div>
<p>如果您有上面的 HTML 代码，则会出现“Not Cleared”div在“Left Float”div 旁边，因为“float: left;”属性使“Left Float”div向左浮动。</p>
<p>要强制“Not Cleared”div出现在“Left Float”div下方，您可以添加“clear:both;”样式：</p>
<pre class="brush:php;toolbar:false"><div>
<p>在这种情况下，“Cleared”div 会下降到“Left Float”和任何其他前面的浮动元素下方。它的行为就好像其上方没有浮动元素一样，确保它出现在所有浮动内容下方。</p>
<p><strong>“clear”的其他变体</strong></p>
<p>除了“clear:both” ，”您还可以使用“clear:left”和“clear:right”。这些变化控制元素落在哪一侧。 “clear:left”强制元素落在前面的左对齐浮动元素下方，而“clear:right”则定位到右对齐的浮动元素。</p>
</div>