使用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;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width: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;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width: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;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>
</body>
</html>

 

posted @ 2013-05-29 22:41  Ganler1988  阅读(796)  评论(2编辑  收藏  举报