清除浮动 | HTML/CSS

一、利用clear属性

在浮动元素后使用一个带{clear:both}属性的空元素即可清除浮动。

<style>
.flo {
      width: 50px;
      height: 50px;
      border: red 1px solid;
      float: left;
      }
.clear {
        clear: both;
       }
</style>
<div>
     <div class="flo">1</div>
     <div class="flo">2</div>
     <div class="flo">3</div>
     <div class="clear"></div>
     <div class="flo">4</div>
</div>

二、利用clear属性2.0- - -用邻接元素处理

直接浮动元素后面的元素添加clear属性

<style>
.flo {
      width: 50px;
      height: 50px;
      border: red 1px solid;
      float: left;
      }
.clear {
        clear: both;
       }
</style>
<div>
        <div class="flo">1</div>
        <p>我是一个垃圾桶</p>
        <p class="clear">我是一个垃圾桶</p>
    </div>

三、使用overflow属性

给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还 需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。 在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动 的效果。

<style>
.flo {
       width: 50px;
       height: 50px;
       border: red 1px solid;
       float: left;
      }
      
.clear {
         clear: both;
        }

.clear2 {
          background-color: gray;
          border: solid 1px black;
          /* overflow: hidden; */
          overflow: auto;
          *zoom: 1
        }
</style>
<div class="clear2">
    <div class="flo">1</div>
    <div class="flo">2</div>
    <div class="flo">3</div>
    <div class="flo">4</div>
 </div>

四、使用 CSS 的:after 伪元素

<style>
.flo {
       width: 50px;
       height: 50px;
       border: red 1px solid;
       float: left;
      }
.first {
       background-color: gray;
       border: solid 1px black;
       }

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

.clearfix {
       /* 触发 hasLayout */
       zoom: 1;
        }
</style>
<!-- 通过CSS伪元素在容器的内部元素最后添加了
        一个看不见的空格"020"或点"."，
        并且赋予clear属性来清除浮动。
        需要注意的是为了IE6和IE7浏览器，
        要给clearfix这个class添加一条zoom:1;
        触发haslayout -->
    <div class="first clearfix">
        <div class="flo">1</div>
        <div class="flo">2</div>
        <div class="flo">3</div>
    </div>

五、给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影 响布局，不推荐使用。
(这个还没明白怎么写)
参考 https://www.cnblogs.com/ForEvErNoME/p/3383539.html

*看到这儿了就顺手点个赞吧~*