清除浮动的几种方式

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .float-div div{
                width: 100px;
                height: 100px;
                margin: 20px;
                /*文字内容垂直水平居中写法*/
                text-align: center;
                line-height: 100px;
                /**/
                background-color:#FFFF99;
                /*浮动*/
                float: left;
            }
            .normal-div{
                width: 100px;
                height: 100px;
                line-height: 100px;
                /**/
                background-color:#CCCCFF;
            }
        </style>
    </head>
    <body>
        <div class="float-div">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="normal-div">A</div>
    </body>
</html>

原版图

1.添加空div标签，并设置样式 clear: both

在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获取到高度
缺点：如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .

        <div class="float-div">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="clear-both"></div>
        <div class="normal-div">A</div>

        .clear-both {
            clear: both;
        }

2.父级标签定义伪类 ::after

        .float-div::after {
            content: '';
            height: 0;
            /**/
            display: block;
            clear: both;        
        }

3.父级标签增加样式 overflow:hidden

父级 div 定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.

        .float-div {
            overflow: hidden;
        }

4.父级 div 定义 height

原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
优缺点：简单、代码少、容易掌握，但只适合高度固定的布局.

5.父级 div 定义伪类：after 和 zoom

原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 1 有点类似，zoom(IE 转有属性)可解决 ie6，ie7 浮动问题 .
推荐使用，建议定义公共类，以减少 CSS 代码。

        .float-div:after{
            /*//设置内容为空
            //高度为0
            //行高为0
            //将文本转为块级元素
            //将元素隐藏
            //清除浮动*/
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
　　　　　}
        .float-div{
            /*为了兼容IE*/
            zoom:1;
        }

清除浮动-效果图

备注：清除浮动的几种方式