理解 CSS 中“clear:both”的作用

当网页中有向左或向右浮动的元素时，它可以导致后续元素围绕它们流动。为了防止这种情况，CSS提供了“clear”属性，可以将其设置为特定一侧（左、右）或“两者”。

“clear:both”有什么用?

"clear:both" 指示元素放置在已左右浮动的所有先前元素下方。这允许它以新行开始，清除可能环绕浮动元素的任何边距或填充。

“clear:both”如何工作？

在正常的文档流中，元素垂直堆叠，内容围绕元素流动。但是，当元素浮动时，它会向左或向右移动，从而允许其他内容在其下方流动。 "clear:both" 告诉当前元素从两侧先前浮动的元素下方开始。

用法示例

考虑以下 HTML 代码：

在此示例中，“Left float”div 向左浮动，导致“This is a paragraph”文本环绕 它。然后使用“Clear Both”div 清除左侧和右侧，从而允许“This is a new paragraph”文本出现在其下方的新行中。
Conclusion 
通过在元素上设置“clear:both”，您可以确保它在任何先前浮动元素下方的新行上开始，从而确保一致且受控的布局。