清除浮动的四种方法:额外标签法,overflow:hidden,单伪元素法和双伪元素法

Posted 澎湃_L

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动的四种方法:额外标签法,overflow:hidden,单伪元素法和双伪元素法相关的知识,希望对你有一定的参考价值。

情景:给脱标(使用了浮动或者定位)的元素增加了一个父级元素,但是又不方便给高度的情况下
(父盒子给高度也是一个解决方法,但是大多数情况下,因为盒子的内容会经常改变,父盒子高度固定,需要每次去调整)
<body>
    <div class=\'box\'>
        <div class="red"></div>
        <div class="blue"></div>
    </div>
    <div class="box1"></div>
</body>
<style type="text/css">
        .box{
            width: 800px;
            background: rgb(17, 12, 12);
        }
        .red{
            background:red;
            width: 200px;
            height: 200px;
            float: left;
        }
        .blue{
            background: blue;
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background: rgb(154, 184, 24);
            width: 300px;
            height: 300px;
        }
    </style>

问题:父级元素高度为零导致影响下面盒子的布局,如上图所示,box1跑到红盒子和绿盒子的下面去了
解决办法:
  • 盒子内容固定的情况:给父盒子设置高度
 .box {
            height: 200px;
        }

  • 盒子内容不固定,需要随内容的改变而改变,就需要清除浮动,有下面这4种方法:

  1.第一种方法,在最后一个浮动的标签后面增加一个盒子并设置clear:both

<body>
    <div>
        <div class="red"></div>
        <div class="blue"></div>
        <div class="addbox"></div>
    </div>
    <div class="box1"></div>
</body>
.addbox{
            width: 100px;
            clear: both;
        }

  2.第二种方法:父级盒子设置overflow:hidden;触发bfc

.box{
            overflow: hidden;
        }

  3.第三种单伪元素标签法,需要给父盒子一个类名clearfix

.clearfix:after{
            content: "";
            height: 0;
            overflow: hidden;
            visibility: hidden;
            display: block;
            clear: both;
        } 
.clearfix {
            zoom: 1;/*兼容IE*/
        }
<body>
    <div class="box clearfix">
        <div class="red"></div>
        <div class="blue"></div>
    </div>
    <div class="box1"></div>
</body>

  4.第四种双伪元素标签法,需要给父盒子一个类名clearfix

.clearfix :before,.clearfix:after{
            content: "";
            display: table;
        }
.clearfix:after{
            clear: both;
        } 
.clearfix {
            zoom: 1;/*兼容IE*/
        }
<body>
    <div class="box clearfix">
        <div class="red"></div>
        <div class="blue"></div>
    </div>
    <div class="box1"></div>
</body>

以上是关于清除浮动的四种方法:额外标签法,overflow:hidden,单伪元素法和双伪元素法的主要内容,如果未能解决你的问题,请参考以下文章

CSS清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

[Web 前端] 018 css 清除浮动的四种方法

如何“清除浮动”

清除浮动

清除浮动

清除浮动的四种方式及其原理理解