XM的小窝


 

【记录】CSS3 为什么要清除浮动&清除浮动的四个方法

需要清除浮动的原因:

  • 父盒子不需要固定高度,让内部盒子撑开父盒子。
  • 子盒子浮动,脱离了标准流,导致父盒子塌陷,影响整体外观。

在标准流下,父盒子默认会被子盒子撑开:

像上面一样,绿色的盒子撑开了蓝色父级盒子.
可如果我们给绿色盒子加上了浮动样式,就会变成这样:

父级盒子内由于子盒子脱离了标准流,父盒子也没有指定高度,造成盒子塌陷。

解决方法:利用clear属性进行清除浮动的操作 :kano-ahh: :

清除浮动方法常用的有四种:

清除浮动的方式 优点 缺点
额外标签法 通俗易懂,书写方便 添加许多无意义的标签,结构化较差
父级overflow:hidden; 书写简单 溢出部分会隐藏
父级after伪元素 结构语义化 after不支持上古浏览器,兼容性较差
父级before+after双伪元素 结构语义化 after不支持上古浏览器,兼容性较差

原理:

额外标签法:
原理:通过在浮动盒子末尾使用额外的盒子标签来“堵住”浮动标签,防止标签“跑出父级”:
代码样例:

<style>
    .bigbox {
        width: 100%;
        background-color: blue;
    }
    .box {
        float: left;
        width: 100px;
        height: 50px;
        background-color: green;
    }
    .clear {
        clear: both;
    }
</style>
<div class="bigbox">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>

父级overflow:hidden;:
原理:通过触发BFC方式,实现闭合浮动(emm还没学到,先记下来)
代码样例:

<style>
/*html代码同上*/
    .bigbox {
        width: 100%;
        background-color: blue;
        overflow: hidden;
    }
    .box {
        float: left;
        width: 100px;
        height: 50px;
        background-color: green;
    }
</style>

父级after伪元素法:
原理:在父盒子尾部创建子盒子拦住浮动盒子实现闭合浮动(俺现在不知道为啥要这么写,先记下来)
代码样例:

<style>
/*html代码同上*/
    .bigbox {/*这里的class名一般取为clearfix*/
        zoom: 1; /*IE浏览器兼容*/
    }
    .bigbox:after {
        content: "."";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>

父级before和after双伪元素:
原理:使用前后两个盒子拦住浮动盒子实现清除浮动(俺也不知道为啥要这么写,先记下来)
代码样例:

<style>
    /*html代码同上*/
    .bigbox:after,
    .bigbx:before {/*这里的class名一般取为clearfix*/
        content: "";
        display: table;
    }
    .bigbox:after {
        clear: both;
    }
    .bigbox {
        *zoom: 1;
        /*IE浏览器兼容*/
    }
</style>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注