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

一、浮动元素的特性

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

二、浮动元素带来的问题

  1. 父元素的高度无法被撑开,影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素会跟随其后
  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

三、清除浮动的四种方式

1. 额外标签法(不推荐)

<!--
1. 额外标签法:给谁清除浮动,就在其后额外添加一个空白标签 。
    优点:通俗易懂,书写方便。(不推荐使用)
    缺点:添加许多无意义的标签,结构化比较差。
-->
<style>
    .clearfix{
        clear: both;
    }
</style>

<div class="f_left"></div>
<div class="clearfix"></div>

2.父级元素添加overflow(不推荐)

<!--
2. 父级添加overflow方法:可以通过触发BFC的方式,实现清楚浮动效果。
    优点:代码简洁(慎重使用,若该父盒子里还有position定位会引起麻烦)
    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
-->
<style>
    #box01{
       overflow: hidden; 
    }
</style>

<div id="box01">
    <div class="f-left"></div>
    <div class="f-right"></div>
</div>
<div id="box02"></div>

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

<!--
3. 使用after伪元素清除浮动::after方式为空元素的升级版,好处是不用单独加标签了。(较常用)
    优点:符合闭合浮动思想,结构语义化正确
    缺点:由于IE6-7不支持:after,使用zoom:1,触发hasLayout。
-->
<style>
    .clearfix:after{    /*正常浏览器,清除浮动*/
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix{  /*ie6清除浮动的方式(其他浏览器不能识别)*/
        *zoom: 1;
    }
</style>

<div id="box01" class="clearfix">
    <div class="f-left"></div>
    <div class="f-right"></div>
</div>
<div id="box02"></div>

4.使用before和after双伪元素清除浮动(推荐)

<!--
4. 使用before和after双伪元素清除浮动:(较常用)
    优点:代码更简洁    
    缺点:用zoom:1触发hasLayout.
-->
<style>
    .clearfix:before, .clearfix:after{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{  /*兼容低版本IE*/
        *zoom: 1;
    }
</style>

<div id="box01" class="clearfix">
    <div class="f-left"></div>
    <div class="f-right"></div>
</div>
<div id="box02"></div>
暂无评论

发送评论 编辑评论


				
上一篇
下一篇