清除浮动的几种方法

当既希望实现子元素的浮动布局，又希望父级元素由内容撑开高度时；或既希望实现元素的浮动布局，又不希望浮动元素对其他兄弟级元素产生影响时，就需要针对浮动元素或相关元素进行一些操作，这些操作放入主要目的是“清除掉浮动元素对其他元素的影响”。

注意:清除浮动，并不是把浮动元素删掉，而是取消掉“浮动元素浮动效果”对其他元素造成的影响。

1. 浮动———— clear属性

用于清除浮动，规定元素的哪一侧不允许存在其他浮动元素。

基本语法

1	clear: both;

clear 属性的属性值

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

2. 清除浮动的不同类型

根据清除浮动的目的，可以分为以下两大类

防止浮动元素引起的兄弟级元素布局受到影响。
防止浮动元素引起的父级高度塌陷。

3. 为兄弟元素设置clear样式

假设父级元素当中存在3个div，第二个div发生了浮动，这个时候第三个div元素有可能受到影响，只需要为第三个div元素设置clear属性即可.

需要注意两点：
1.并非浮动元素的所有兄弟级元素都需要清除浮动，只需要针对浮动元素的下一个兄弟级元素设置清除浮动，后面所有元素的布局都会恢复。
2.如果希望在第二个div(浮动元素)与第三个div之间有一定间距，为浮动元素后的一个兄弟级元素设置顶部外边距时会失效，此时，可以为浮动元素设置下边距。

4.空标签清除浮动

操作: 在浮动元素的后面，增加一个新标签，这个新标签是浮动元素的兄弟级元素，之后为这个标签设置clear属性。

优点: 通俗易懂，操作方便。

缺点: 会添加大量无语义空标签，结构与表现未分离，不利于维护。

如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
    <div class="clear"></div>
</div>
</body>
</html>

5. br标签清除浮动

操作： br标签清除浮动的方法类似空标签清除浮动，在浮动元素后面添加一个br标签，在br标签中设置clear属性，并赋值all.

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
       
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
    <br clear="all">
</div>
</body>
</html>

6. 父元素浮动

操作: 为当前浮动元素的父级元素设置浮动。

缺点：父元素的相邻元素布局受影响————于是需要继续为其父级的父级设置浮动操作，直到 body 为止。

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            float: left;
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
       
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
</div>
</body>
</html>

7. 父元素设置 overflow: hidden或 auto

操作：为当前浮动元素的父级元素设置 overflow: hidden或 auto .

缺点：内容多的时候，会被隐藏，无法显示需要溢出的元素，也可能会对以后的js的一些动态效果操作造成影响。

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            overflow: hidden;
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
       
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
</div>
</body>
</html>

8. 利用 after 伪元素清除浮动

操作：为当前浮动元素的父级元素添加 after 伪元素，为after伪元素设置清除浮动的功能代码。

缺点: 如果使用不合理，有可能造成代码量增加；另外，IE6/7不支持after伪元素，需要使用zoom:1触发hasLayout来清理浮动。

如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
        .wrap:after{
            content: '\200B';
            clear: both;
            display: block;
            height: 0;
        }
        .wrap{
            *zoom:1;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
    
</div>
</body>
</html>

代码解析: content: ‘\200B’;中content表示内容，’\200B’表示一个零宽度的空格。对于伪元素来说，如果没有内容，则不会显示在页面当中，因此需要设置内容。

display: block; 将伪元素设置为”块状元素”，也就是让其具备div元素的特点。 height: 0;是将伪元素的高度设置为0,目的在于防止高度对布局造成影响。

通常情况下，使用最为频繁的是after 伪元素清除浮动，它是空标签清除浮动的“升级版”，该方法能够让代码量变得简单，更便于操作。

.clearfix:after{
           content: '\200B';
           clear: both;
           display: block;
           height: 0;
       }
       .clearfix{
           *zoom:1;
       }

只需要将需要清除浮动的类名加上 clearfix 即可。