CSS清除浮动方法

最新推荐文章于 2022-05-17 16:31:13 发布

star9595

最新推荐文章于 2022-05-17 16:31:13 发布

阅读量162

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u014042372/article/details/81506929

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS清除浮动方法

1. 给父亲元素设置高度

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            border: 1px solid red;
        }
        li{
            float: left;
            width: 90px;
            height: 40px;
            background-color: goldenrod;
        }
        /*清除浮动：1.给父亲(祖先)标签设置高度；
        有高度的盒子，才能关住浮动；*/

    </style>
</head>
<body>
    <div>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>郑州</li>
        </ul>
    </div>

    <div>
        <ul>
            <li>漯河</li>
            <li>周口</li>
        </ul>
    </div>
</body>
</html>

2. 给盒子增加clear both属性

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /*使用clear both 会导致margin失效*/
        #box2{
            clear: both;
        }
        li{
            float: left;
            width: 90px;
            height: 40px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>郑州</li>
        </ul>
    </div>

    <div id="box2">
        <ul>
            <li>漯河</li>
            <li>周口</li>
        </ul>
    </div>
</body>
</html>

3. 隔墙法

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /* 隔墙法 */
        .blank16{
            clear: both;
            height: 16px;
        }
        li{
            float: left;
            width: 90px;
            height: 40px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div id="box1">
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>郑州</li>
        </ul>
    </div>
    <!--隔墙法-->
    <div class="blank16">

    </div>


    <div id="box2">
        <ul>
            <li>漯河</li>
            <li>周口</li>
        </ul>
    </div>
</body>
</html>

4. 内墙法

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /* 内墙法  脱标的元素不能把父元素撑出高 */
        .blank16{
            clear: both;
            height: 16px;
        }
        li{
            float: left;
            width: 90px;
            height: 40px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div id="box1">
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>郑州</li>
        </ul>
        <!--内墙法-->
        <div class="blank16">

        </div>
    </div>
    <div id="box2">
        <ul>
            <li>漯河</li>
            <li>周口</li>
        </ul>
    </div>
</body>
</html>

5. 设置overflow: hidden属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 400px;
            border: 1px solid black;
            /*给div加上overflow: hidden之后，就能被浮动的儿子撑出高度 （奇淫技巧）*/
            overflow: hidden;
        }
        .p1{
            float: left;
            width: 100px;
            height: 400px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 120px;
            height: 200px;
            background-color: blue;
        }
        .p3{
            float: left;
            width: 180px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

    <div>
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
    </div>
</body>
</html>

总结：

1. 浮动的元素，只能被有高度的盒子关住。也就是说如果盒子内部有浮动，这个盒子有高度，那么妥妥的，浮动不会相互影响。但是工作中不会给所有的盒子添加高度属性，这是因为麻烦，并且不能适应页面的快速变化；
2. 给盒子增加clear:both表示自己内部的元素，不受其他盒子的影响,但是margin属性失效；
3. 隔墙法，在两部分浮动元素的中间，建一堵墙，隔开两部分浮动，让后面浮动的元素，不去追前面的浮动元素，但是第一个div还是没有高度，如果想让第一个div自动的根据儿子的内容撑出高度，就要用奇淫技巧；
4. 内墙法，不仅能让后面的浮动元素，不去追前面的浮动元素，并且能把第一个div撑出高度，这样这个div的背景、边框就能根据浮动元素的高度撑开了；
5. overflow: hidden这个属性的本意是将溢出盒子的内容隐藏掉，但是我们发现这个东西能用于浮动的清除，即父亲加上overflow: hidden之后，就能被浮动的儿子撑出高度，并且overflow: hidden能够让margin生效；