清除浮动的几种方法

标签：#清除浮动# 时间：2018/10/10 22:29:39 作者：Shino

    <style type="text/css" media="screen">
    *{
        margin: 0；
        padding：0；
    }
    div{
        background-color:skyblue;
    }
    /*清除浮动的方法*/
    li{
        float: left;
        width: 120px;
        height: 40px;
        background-color: yellow;
        text-align:center;/*文本居中*/
    }
    /*①给祖先盒子加高度*/
    /*.box1{
         height: 40px;
    }*/
    /*在网页中 高度height其实很少出现 因为能被内容撑高 所以方法①工作中使用的很少*/

    /*② clear both*/
    /*.box2{
        clear:both; 
    } *//*clear 清除 both指左浮动和右浮动都清除 表示清除别的浮动的影响*/
    /*这个方法有个问题 margin无效 */

    /*③ clear both隔墙法*/
    /*.c1{
        clear: both;
        height: 10px;
    }*/ /*用盒子添加clear both把要分开的两个浮动隔开*/

    /*④ 内墙法*/
    /*浮动的元素是无法给祖先元素撑出高的*/
    .c2{
        clear: both;
    }/*和隔墙法不同 内墙法可以将祖先元素撑出高度 此时即使祖先元素没有赋予高 依然会有高度*/

</style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
        </ul>
        <div class="c2"></div>
    </div>
    <div class="c1"></div>
    <div class="box2">
        <ul>
            <li>书库</li>
            <li>练习</li>
            <li>测评</li>
        </ul>
    </div>
</body>

清除浮动的几种方法

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客