【H5】清楚浮动的方法

最新推荐文章于 2024-04-26 16:47:03 发布

学那些一学就会的编程

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量152

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_77198532/article/details/130514817

版权

一.使用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 class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

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

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

二.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

三、溢出隐藏法

overflow: hidden;

优点：简单粗暴，都能应用到

缺点：会影响到很多事情，懂得都懂

学那些一学就会的编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【H5】清楚浮动的方法

优点：符合闭合浮动思想，结构语义化正确缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
复制链接

扫一扫