清除浮动方法

最新推荐文章于 2024-08-31 21:49:18 发布

liuyex

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量55

点赞数

文章标签： html css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/liuyex/article/details/128882548

版权

文章介绍了当浮动元素导致父元素高度变为0的问题，以及三种解决方法：额外标签法、设置overflow属性和使用clearfix类。推荐使用添加clearfix伪元素的方式来清除浮动，以保持父元素高度并避免内容溢出。

摘要由CSDN通过智能技术生成

清除浮动元素造成的影响——父元素未设置height，浮动元素(不占位置)导致父元素height变为0

清除浮动后，父元素就可以根据浮动的子元素自动检测高度

额外标签法(隔墙法)：在浮动元素的末尾添加一个空白标签(块级元素)

<div style="clear:both"></div>

给父元素添加overflow属性，（属性值为hidden、auto、scroll）

overflow: hidden 但这会隐藏溢出部分

给父元素添加:after伪元素(推荐)

——额外标签法的升级版

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*IE6、IE7专用*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">son1</div>
        <div class="small">son2</div>
    </div>
    <div class="footer"></div>
</body>

给父元素添加双伪元素(推荐)

    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

<body>
    <div class="fahter clearfix">
        <div class="big">son1</div>
        <div class="small">son2</div>
    </div>
    <div class="footer"></div>
</body>