使用clearfix样式来清除浮动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--
    /**
     * Created by JetBrains WebStorm.
     * User: Ganler
     * Date: 13-5-29
     * Time: 下午10:31
     * To change this template use File | Settings | File Templates.
     */
     -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .clearfix {
            *zoom: 1;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            line-height: 0;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }
    </style>
</head>
<body>
<div style="border:2px solid red;">
    没有clear的效果
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>
<div style="border:2px solid red;margin-top: 100px;">
   clear:both
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>
<div style="border:2px solid red;margin-top:100px;" class="clearfix">
 父容器使用 clearfix
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>
</body>
</html>

相关阅读:
当前信息型强人工智能发展缺失条件--规则
假象篇(1)-动态可变参数的神经网络
02梦断代码阅读笔记
结队开发之NABCD
01梦断代码阅读笔记
03构建之法阅读笔记
进度3
02构建之法阅读笔记
01构建之法阅读笔记
关于最大子序和的算法问题（二）

原文地址：https://www.cnblogs.com/ganler1988/p/3107187.html