CSS 为什么

fieldset>元素会清除浮动

在本文中，我们将介绍为什么在CSS中，

fieldset>元素会用来清除浮动。首先，让我们先了解一下浮动的概念。

阅读更多：CSS 教程

浮动（Float）

浮动是一种常见的CSS布局技术，用于改变元素在网页中的位置。通过将元素浮动到左侧或右侧，可以使其他内容环绕在它周围。

浮动元素会脱离正常的文档流，这意味着其他元素会忽略它的存在，导致布局混乱。为了解决这个问题，可以使用清除浮动的技术。

清除浮动（Clear Float）

清除浮动是一种技巧，用于使元素回到正常的文档流中，从而避免其他元素忽略浮动元素的位置而导致布局问题。在CSS中，使用clear属性来清除浮动。

一般而言，我们可以将一个元素设置为clear:both来清除浮动，这会使元素放置在之前的浮动元素下方，确保布局的正确性。

然而，有一个容器元素在CSS中被广泛用于清除浮动，那就是

fieldset>元素。

fieldset>元素和

legend>元素

fieldset>元素是HTML中的一个容器元素，用于将一组相关的表单元素进行分组。它通常和

legend>元素一起使用，

legend>元素用于为

fieldset>元素添加标题。

fieldset>元素本身并没有特殊的CSS属性或样式，但它却具有清除浮动的效果。这是因为

fieldset>元素默认具有一个CSS属性：display: block。

在CSS中，块级元素（block-level element）会自动清除其前面的浮动元素。因此，当

fieldset>元素作为容器元素包裹浮动元素时，它的display: block属性会触发浮动的清除。

示例代码如下：

<fieldset>
  <legend>浮动元素示例</legend>
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 100px; background-color: blue;"></div>
  <div style="clear: both;"></div>
</fieldset>

在上面的示例中，我们使用了

fieldset>元素作为容器元素将两个浮动的

div>元素包裹起来，并在最后添加了一个空的

div>元素应用clear: both属性。这样，

fieldset>元素的block属性就会触发浮动的清除，使得浮动元素下方正常显示。

其他清除浮动的方法

除了

fieldset>元素，还有其他的清除浮动的方法。常用的方法包括：

1. 使用空的

div>元素进行清除

在浮动元素的最后添加一个空的

div>元素，并在该元素上应用clear: both属性，可以实现清除浮动的效果。

<div style="clear: both;"></div>

2. 使用clearfix类

clearfix类是一种常用的CSS类，通过应用该类来清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

在需要清除浮动的元素上添加clearfix类，就可以实现清除浮动的效果。

<div class="clearfix">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 100px; background-color: blue;"></div>
</div>

3. 使用父元素的overflow属性

将父元素的overflow属性设置为hidden或auto，也可以清除浮动。

.parent {
  overflow: hidden;
}

<div class="parent">
  <div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
  <div style="float: right; width: 100px; height: 100px; background-color: blue;"></div>
</div>