html 清除浮动的几种方法

方法一：在浮动元素的末尾添加一个块元素，一般用div。然后给这个div设置一个clear：both属性，就可以做到清除浮动了。

<style>
 .main {
            background-color: aqua;
            width: 1080px;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        ul {
            width: 800px;
            margin: 0 auto;
            background-color: hotpink;
        
        }
        .main>ul>li {
            
            height: 100px;
            width: 150px;
            background-color: orange;
            float: left;
            margin-right: 25px;
            margin-left: 25px;
            
        }
</style>

<div class="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <div class="clear"></div>
        </ul>
    </div>

这种方法虽然比较通俗易懂，但是会添加许多无意义的标签，优化不方便。 所以这种方法并不推荐使用。

方法二：给父元素添加一个overflow:hidden/auto/scroll这三个属性中的任意一个

这种方法虽然代码很简洁，但是当子元素的内容比较多的时候，部分内容就会被隐藏掉！

方法三：根据第一种方法的思路进行改良。

代码如下

<style>
.main {
            background-color: aqua;
              width: 1080px;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        ul {
            width: 800px;
            margin: 0 auto;
            background-color: hotpink;
        }
        .main>ul>li {
            height: 100px;
            width: 150px;
            background-color: orange;
            float: left;
            margin-right: 25px;
            margin-left: 25px;
        }
        .clearfix:after {
            content: '.'; /*  内容加个. 不要为空， 否则部分浏览器有空隙 */
            display: block; /*  换成块元素 */
            height: 0;   /*  高度为0 */
            visibility: hidden;  /*  隐藏掉盒子 */
            clear: both; /*  清除浮动 */
        }
        .clearfix {
            *zoom:1; /* 兼容ie6，7 */
        }
</style>




 <div class="main clearfix">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

给div再添加一个类名，一般用clearfix。这种方法符合闭合浮动，语义化结构正确。

方法四：跟方法三类似，用**：fater和：before**，代码更简洁

<style>
 .main {
            background-color: aqua;
              width: 1080px;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        ul {
            width: 800px;
            margin: 0 auto;
            background-color: hotpink;
        }
        .main>ul>li {
            height: 100px;
            width: 150px;
            background-color: orange;
            float: left;
            margin-right: 25px;
            margin-left: 25px;
        }
        .clearfix:after,.clearfix:before {
            content: ''; 
            display: table;  /* 清除BFC */
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom:1; /* 兼容ie6，7 */
        }
</style>
        
 
 
 
 <div class="main clearfix">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>       
        

我们在开发的时候使用第三种，第四种写法都是比较推荐的。

就很有趣~