CSS-清除浮动

<pre>

清除浮动

盒子高度问题

  • 在标准流中内容的高度可以撑起盒子的高度
<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>
  • 在浮动流中浮动元素内容的高不可以撑起盒子的高
<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

清除浮动方式一

  • 给前面的父盒子添加高度

  • 示例代码:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加高度前:

  • 添加高度后

  • 注意点:

    • 在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

  • 利用clear:both;属性清除前面浮动元素对我的影响

  • 示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加clear: both;前:

  • 添加clear: both;后

  • 注意点:

    • 使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

  • 在两个有浮动子元素的盒子之间添加一个额外的块级元素

  • 示例代码:


<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--这里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加额外块级元素前

  • 添加额外块级元素后

  • 注意点

    • 在外墙法中可以通过设置额外标签的高度来实现margin效果

    • 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

  • 在前面一个盒子的最后添加一个额外的块级元素

  • 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--这里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加额外块级元素前

  • 添加额外块级元素后

  • 注意点:

    • 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性

    • 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

  • 什么是overflow:hidden?

    • overflow:hidden的作用是清除溢出盒子边框外的内容

  • 示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

  • 添加overflow:hidden前

  • 添加overflow:hidden后

  • 如何利用overflow:hidden;清除浮动

    • 给前面一个盒子添加overflow:hidden属性

  • 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加overflow:hidden;前

  • 添加overflow:hidden;后

  • 注意点:

    • 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性

    • IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;

    • 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

  • *zoom:1;和_zoom:1的区别

    • 这个是hack写法，用来识别不同版本的IE浏览器

    • _后面的属性只有IE6能识别

    • *后面的属性 IE6 IE7能识别

清除浮动方式六

  • 给前面的盒子添加伪元素来清除浮动

  • 示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

  • 添加伪元素前

  • 添加伪元素后

  • 注意点:

    • 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素

    • 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

    • CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1赞 92
  • CSS-清除浮动
    什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（flo...
    秦至阅读 436评论 1赞 8
  • CSS清除浮动的方法
    前言 摘要： 浮动的元素可以向左或向右移动，直到它的外边缘碰到父容器或另一个浮动元素为止。由于浮动元素不在文档的普...
    zouyang0921阅读 413评论 0赞 2
  • 难以忘怀的
    w是我小学一二年级的同学，于我而言，是一段特别的回忆。相识的场景已经记不清了，也不知是怎么玩到一起的。名字里有相同...
    77歪歪阅读 166评论 0赞 0
  • 《厉害的妈妈到底会养出什么样的孩子》
    《厉害的妈妈到底会养出什么样的孩子》 珊珊得久/文 有句教育名言这样说原生家庭与孩子之间...
    珊珊得久阅读 966评论 0赞 2