清楚浮动的3种方式

Posted 2020-09-07

方式一：在浮动的div后面添加一个空白的div，在该空白div中设置clear：both

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="clear"></div>
</div>

css:
.clear{clear:both;}


方式二：为包含浮动div的父元素设置overflow,设置zoom:1;兼容IE

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
</div>

css:
.outer{overflow:auto;zoom:1;}

方式三：利用：after伪类在父元素后面插入一个div,类似方法一，好处是没有在html中设置多余的空白div

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
</div>

css:
.outer：after{
        clear:both;
        content:‘‘;
        width:0;
        height:0;
        visibility:hidden;
    }

.outer{zoom:1;}