清除浮动的常用方法 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>无标题文档</title>
    <link rel="shortcut icon" href="img/icoTest.ico">
</head>
<style type="text/css">
    /*公共样式*/
    ul,li,div{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .floatLeft{
        float: left;
    }
    .floatRight{
        float: right;
    }
    /*方法一：设置overflow清除浮动（同理可设置父级元素高度）*/
    /*
    .overFlow{
        overflow: auto;
        zoom:1;//处理兼容性
    }
    */

    /*方法二：添加元素清除浮动*/
    /*
    .floatClear{
        clear: both;
    }
    */

    /*方法三：通过伪类*/
    .container{zoom: 1;}/*处理兼容性问题*/
    .container :after{
        display: block;
        clear: both;
        width: 0;
        height: 0;
        content: "";
        visibility: hidden;
    }
    /*样式*/
    .container{
        position: relative;
        width: 302px;
        height: 500px;
        margin: auto;
    }
    .container .nav{
        width:212px;
    }

    .container .nav li{
        width: 90px;
        height: 30px;
        border: 1px solid #ccc;
    }
    
    .content{
        z-index: 1;
        width: 210px;
        height: 300px;
        border: 1px solid #ccc;
    }
</style>
<body>
    <div class="container">
        <ul class="nav overFlow">
            <li class="floatLeft"></li>
            <li class="floatRight"></li>
        </ul>
        <!--方法二：清除浮动-->
        <!--
        <div class="floatClear"></div>
        -->
        <div class="content"></div>
    </div>
</body>
<html>

 

posted @ 2017-01-31 23:33  似  阅读(187)  评论(0)    收藏  举报