美文网首页狂虐H5+移动跨平台开发前端前端开发学习
16-CSS基础-清除浮动

16-CSS基础-清除浮动

作者: 极客江南 | 来源:发表于2016-10-19 23:00 被阅读4071次

    清除浮动

    盒子高度问题

    • 在标准流中内容的高度可以撑起盒子的高度
    <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能够触发IE8之前IE浏览器的hasLayout机制
      • 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

    • *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中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

    清除浮动方式七

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

    • 示例代码

    <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;
        }
        
        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            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属性
      • 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
      • 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
      • 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。

    学习交流方式:
    1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
    2.加入前端学习交流群:
    302942894 / 289964053 / 11550038

    相关文章

      网友评论

      • nash_yu:老师，我现在学到了这篇清除浮动，在用内墙法和外墙法时，它既可以让第二个盒子使用margin-top，也可以让第一个盒子使用margin-bottom属性，老师你那个视频说第一个盒子不能使用margin-bottom属性。也可能我哪里代码不一样！一直跟着老师的课学了很多，感谢老师
      • 不一样的彩虹:江哥威武
      • 稻草人12138:显示有点乱啊
      • 方克己:呀！这个文章出事故了 markdown显示乱了
      • 会跳舞的狮子:早就关注你了，可写文章了，等待还是值得的，哈哈
        极客江南:@会跳舞的狮子 :smiley:

      本文标题：16-CSS基础-清除浮动

      本文链接：https://www.haomeiwen.com/subject/syxfuttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      狂虐H5+移动跨平台开发

      前端

      前端开发学习

      html+css

      HTML5

      css

      HTML

      牛逼

      关于我们|服务条款|联系我们|16-CSS基础-清除浮动|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！