CSS 规则“ clear : both ”的作用是什么？

clear:both 是一个CSS属性，主要用于控制元素周围的浮动布局。在Web开发中，当使用 float 属性使得元素浮动时，这些浮动元素会影响到它们周围的非浮动元素，有时会导致布局上的混乱或重叠。clear:both 的作用就是阻止元素与前面的任何浮动元素（无论是左浮动还是右浮动）在同一行显示。

举个例子，假设我们有几个通过 float:left 或 float:right 排列的图像或盒子，并且我们希望紧接着这些浮动元素的下一个内容（比如一个段落 <p>）能够出现在一个新的行，而不是紧贴在浮动元素的旁边。这时，我们可以在该段落 <p> 上使用 clear:both，这样它就会忽略前面的所有浮动元素，从新的一行开始显示。

html
<div style="float: left;">左侧内容</div>
<div style="float: right;">右侧内容</div>
<p style="clear: both;">这是一个新的段落，将出现在浮动内容下方。</p>

在这个例子中，不论左侧或右侧的 div 是否浮动，<p> 标签都会跳到下一行开始，确保前面的浮动不会影响到它的布局。这个技术在实现多栏布局或处理图文混排的场景中非常有用。