【CSS基础】清除浮动的几种方式

前言

在没有出现flex布局之前，几乎所有的左右布局都是使用float进行浮动的。flex布局兼容性不太好，一些老的浏览器没有使用这个css3的新特性，所以如果考虑到兼容问题，就可以考虑使用float进行布局了。但是使用了float属性的元素会脱离标准的文档流，顾名思义，float（浮动）就说明了它的用意，即浮动在其他元素上。所以对于父元素来说，加了float的子元素是漂浮在上面的，而下层的元素则会挤上来，这样非常不符合视觉要求。

浮动的盒子

图中红色边框的元素是加了边框的元素，而我是其他的内容的元素则是和浮动元素父元素的同级别的元素，可以看到，这样是很不美观的，按照道理，我是其他的内容的元素应该显示在边框元素的下方。所以清除浮动就显得很有必要了

解决

方法一：给父元素添加合适的高度

css

      .des_wrap {
        background-color: orange;
      }

      .container {
        height: 120px;
      }

      .box {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

html

    

      

      

      

      

      

      

    

    

      
清除浮动 - 给父元素设置高度
      
给父元素设置指定的高度
    

说明：container是浮动元素的父元素，给父元素添加了120px的高度。效果如下：

方法二：隔墙法

给最后一个浮动盒子处添加一个元素，加上clear:both;属性

css

      .des_wrap {
        background-color: orange;
      }

      .container {
        height: 120px;
      }

      .box {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

      .clear {
        clear: both;
      }

html

    

      

      

      

      

      

      

      

    

    

      
清除浮动 - 隔墙法
      
给最后一个浮动盒子处添加一个元素，加上clear：both；属性
    

效果

方法三：给父元素添加overflow

给浮动元素的父元素的样式overflow除了visible值以外的值

css

      .des_wrap {
        background-color: orange;
      }

      .container {
        overflow: hidden;
        /* overflow: visible; */
      }

      .box {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

html

    

      

      

      

      

      

      

    

    

      
清除浮动 - overflow
      
给浮动元素的父元素的样式overflow除了visible值以外的值
    

效果

方法四：利用父元素的伪元素

给浮动元素的父元素的伪元素添加clear:both;属性

css

      .des_wrap {
        background-color: orange;
      }

      .container {
      }

      .box {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

      .clearfix::after {
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
      }

html

    

      

      

      

      

      

      

    

    

      
清除浮动 - 伪元素
      
给浮动元素的父元素的伪元素添加clear:both;属性
    

效果图

方法五：双伪元素

css

      .des_wrap {
        background-color: orange;
      }

      .container {
      }

      .box {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

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

html

    

      

      

      

      

      

      

    

    

      
清除浮动 - 双伪元素
      
给浮动元素的父元素的伪元素添加clear:both;属性
    

总结

日常生活中，使用比较频繁的是方法三和方法四