笔记大全

css清除浮动float的三种方法是什么

更新时间：2023-12-09

前言

在HTML和CSS编程中，清除浮动的方式是非常常见的问题。由于浮动元素脱离文档流，可能会导致布局混乱，所以需要使用三种方式来清除浮动。接下来，将讨论三种最常用的清除浮动的方法，分别是空盒子、浮动盒子和使用父元素清除。我们会分别讲解每种方法的原理，以及如何使用和优缺点。

方法一：空盒子

空盒子法，顾名思义，是在一系列浮动元素后面添加一个空盒子元素并清除其浮动属性。代码实现如下：

      <div class="float-box">
        <div class="float-left">左</div>
        <div class="float-left">右</div>
        <div class="clearfix"></div>
      </div>

在上面的例子中，".float-left"类被定义为浮动元素。当它们被包含在".float-box"类的DIV元素中时，必须添加一个额外的DIV元素来清除浮动，该DIV元素的"clearfix"类包含以下CSS样式：

      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .clearfix {
        zoom: 1; /* IE6或早期版本 */
      }

这里，class属性被设置为"clearfix"的DIV元素被定义来反转所有先前浮动的元素的浮动左右属性。CSS伪元素（：after）被用于添加空白，而clear：both;的CSS属性则用于清除左侧的浮动元素，这使得元素被重新准确地包含在DIV中以消除布局混乱。

空盒子方法是清除浮动最常用的方式之一,在各大浏览器中都能完美运用，优点是容易掌握和实现，但缺点是会产生不必要的标记和隐藏内容的问题

方法二：浮动盒子

浮动盒子法通过设置容器元素的overflow属性或在容器元素后添加一个清除浮动的伪元素来清除浮动。代码实现如下：

      <div class="float-box clearfix">
        <div class="float-left">左</div>
        <div class="float-left">右</div>
      </div>

在上面的例子中，".float-box"类还包含".clearfix"类，该类具有以下样式：

      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .clearfix {
        overflow:auto;/* IE6或早期版本 */
      }

这种方法下，通过将overflow属性设置为auto，可以通过延伸容器来抑制块级元素的浮动。该方法也使用了与空盒子方法相同的".clearfix:after"CSS伪元素，以便在添加了伪元素后将容器重新定位。优点是该方法不需要添加多余的HTML标记，缺点是在某些情况下可能会影响容器的滚动条。

方法三：使用父元素清除

在使用此方法时，使用与空盒子和浮动盒子方法相反的approach方式--不扩展容器并将浮动left属性添加到父元素中。代码实现如下：

      <div class="float-parent">
        <div class="float-left">左</div>
        <div class="float-left">右</div>
        <div style="clear:both;&height:0;font-size:0;"></div>
      </div>

在上述方法中，浮动元素包含在".float-parent"类的DIV元素中，该DIV元素不包含清除浮动的CSS or HTML。但是，必须添加一个额外的DIV元素并将其设置为clear：both;来防止浮动影响其他元素。

总之，清除浮动的每种方法都有其优缺点，因此需要根据您的具体情况选择最适合您的方法。在实际应用中，由于使用flex，grid等CSS布局，现在已经不常用。如果您在工作中偶尔遇到需要清除浮动时，上述三种清除浮动的方法仍然值得尝试。

c语言编程笔录