美文网首页
清除浮动的最常用的四种方法,以及优缺点

清除浮动的最常用的四种方法,以及优缺点

作者: Yin先生 | 来源:发表于2019-08-28 23:32 被阅读0次

    为什么要清除浮动?

    清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题

    1.如下,我给父盒子设置一个boder,内部放两个盒子一个box1 一个box2,未给box1和box2设置浮动,则他们会默认撑开父盒子.


    image.png

    2.当我们给内部两个盒子都加上float属性的时候。


    image.png

    我们已经给box1和box2加上浮动属性了,因为父元素没有加高度导致底部黄色的盒子顶了上来,变成了一条线。

    总结一下:
    当父元素不给高度的时候,内部的子元素会自动撑开;而浮动时父元素会变成一条线。

    那我们该怎么解决这个问题呢,往下看。

    清除浮动的方法(最常用的4种)

    1.额外标签法(在最后一个浮动标签后,新加一个空div标签,给其设置clear:both;)(不推荐)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box {
                border:1px solid red;
                width:500px;
            }
            .box1 {
                width:100px;
                height:100px;
                background:pink;
                float:left;
            }
            .box2 {
                width:50px;
                height:50px;
                background:blue;
                float:left;
            }
            .footer {
                width:400px;
                height:50px;
                background:yellow;
            }
            .clear {
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="clear">额外的</div>
        </div>
        <div class="footer"></div>
    </body>
    </html>
    

    效果如下:


    image.png

    如果我们清除了浮动,父元素就会自动检测盒子最高的高度,然后与他同高。
    优点:通俗易懂,方便。
    缺点:添加无意义的标签,语义化差。

    2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
    通过触发BFC方式,实现清除浮动

     .fahter{
            width: 400px;
            border: 1px solid deeppink;
            overflow: hidden;
        }
    

    优点:代码简洁
    缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素(不推荐使用)

    3.使用after伪元素清除浮动(推荐使用)

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
        }
     
    <body>
        <div class="fahter clearfix">
            <div class="big">big</div>
            <div class="small">small</div>
        </div>
        <div class="footer"></div>
    </body>
    

    优点:符合闭合浮动思想,结构语义化正确

    缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.(推荐使用)

    4.使用before和after双伪元素清除浮动(代码简洁,推荐使用)

            .clearfix::before,
            .clearfix::after {
              content: "";
              clear: both;
              display: block;
            }
    
    <div class="box clearfix">
           <div class="box1">box1</div>
           <div class="box2">box2</div>
       </div>
       <div class="footer"></div>
    

    相关文章

      网友评论

          本文标题:清除浮动的最常用的四种方法,以及优缺点

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