前端面试题：清除浮动的几种方法

最新推荐文章于 2024-09-09 15:01:35 发布

进阶中的小码农

最新推荐文章于 2024-09-09 15:01:35 发布

阅读量654

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_60665016/article/details/122219924

版权

一、给父级添加overflow:hidden

父级添加overflow(触发BFC清除浮动)不推荐使用;

优点：简单、代码少、浏览器支持好;

缺点：内容增多的时候易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素;

且不能和position配合使用，因为超出的尺寸会被隐藏.

<style>
        .parent {
            width: 200px;
            height: auto;
            padding: 20px;
            background-color: pink;
            overflow: hidden;
        }
        .son {
            float: left;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>

<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

二、额外标签法

额外标签法：最后一个子元素后添加一个空div标签，不推荐使用

优点：通俗易懂，书写方便；

缺点：添加许多无意义的标签，结构化较差.

<style>
    .parent {
        width: 200px;
        height: auto;
        padding: 20px;
        background-color: pink;
    }
    .son {
        float: left;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
    .clear {
        clear:both;
    }
</style>

<body>
<div class="parent">
    <div class="son"></div>
    <div class="clear"></div>
</div>

三、父元素添加after伪元素

父元素添加after伪元素（额外标签法升级版，不用单独加标签了）推荐使用

优点：符合闭合浮动思想，结构语义化正确，不容易出现问题；

缺点：ie6-7不支持.

<style>
    .parent {
        width: 200px;
        height: auto;
        padding: 20px;
        background-color: pink;
    }
    .parent::after {
        /* content必须要加 ；三行代码缺一不可*/
        content: '';
        display: block;
        clear: both;
    }
    .son {
        float: left;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

<body>
<div class="parent">
    <div class="son"></div>
</div>
<body>

四、定义一个清除类clearfix,加给受影响的父元素

推荐使用（本质上与直接给parent加after伪元素一样）

优点：代码更简洁.

<style>
    .parent {
        width: 200px;
        height: auto;
        padding: 20px;
        background-color: pink;
    }
    .clearfix::after {
        content: '';
        height: 0;
        display: block;
        clear: both;
    }
    .son {
        float: left;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

<body>
    <div class="parent clearfix">
        <div class="son"></div>
    </div>
</body>

五、给父级加宽度（不常用）

<style>
    .parent {
        width: 200px;
        /* height: auto; */
        height: 100px;
        padding: 20px;
        background-color: pink;
    }
    .son {
        float: left;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
</style>

<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>