迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

清除浮动的四种方式以及优缺点总结

作者:迹忆客 时间:2021/04/25 浏览次数:

我们先看一下浮动带来的影响

   <style>
        .outer {
            background: #000;
        }
        .outer .box1 {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

        .outer .box2 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background: yellow;
        }
 </style>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="bottom"></div>
</body>

 

清除浮动的四种方式以及优缺点总结
 

没有清除浮动之前,bottom盒子本来在outer盒子下面的,但是由于box1和box2浮动,导致父盒子outer高度为0,bottom盒子上去,为了解决这个问题,需要清除浮动。下面介绍清除浮动的四种方式以及每种方式的优缺点。

方式一:额外标签法

额外标签法就是在最后一个浮动的子元素后面添加

语法: 选择器{clear:属性值}

(属性值:left | right | both,实际工作中,几乎只用both)

在box2后面添加一个div设置clear:both;

代码如下:

    <style>
        .outer {
            background: #000;
        }

        .outer .box1 {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

        .outer .box2 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background: yellow;
        }
    </style>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="clear"></div>
    </div>
    <div class="bottom"></div>

</body>

优点:通俗易懂,书写方便

缺点:添加许多无意义的标签,结构化较差

注意:要求添加这个新标签必须是块元素。

方法二:父元素添加overflow

方法:可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 。

常用:overflow:hidden

代码:代码:

    <style>
        .outer {
            background: #000;
            overflow: hidden;
        }

        .outer .box1 {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

        .outer .box2 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background: yellow;
        }
    </style>

    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="bottom"></div>

优点:代码简洁

缺点:无法显示溢出的部分

方法三:after伪元素

.clearfix:after { 
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden; 
 }
 .clearfix {  /* IE6、7 专有 */
         *zoom: 1;
 }

优点:没有增加标签,结构更简单

缺点:需要照顾低版本浏览器

代表:百度,淘宝网,网易等

方法四:双伪元素

.clearfix:before,.clearfix:after {
   content:"";
   display:table;
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

总结:
清除浮动的四种方式以及优缺点总结

上一篇:关于nth-child(n)和nth-of-type(n)区别

下一篇:没有了

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

热门标签