前端清除浮动常用的四种方法

前言

清除浮动主要是为了解决,当父元素未设置高度,子元素使用了浮动(浮动元素会脱离标准流,不占位),引起的内部高度为0,从而影响后续父同级标准流盒子布局的问题。

演示代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
效果图

方法一:额外标签法

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置clear:both;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    .clearfix{
        clear: both;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
    <!--清除新标签-->
    <div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>

方法二:单伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    /*使用伪元素代替了html中的额外标签*/
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
</style>
<body>
<div class="head clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

方法三:双伪元素清除法(推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    /*使用伪元素代替了html中的额外标签,clearfix::before解决外边距塌陷问题*/
    .clearfix::before, .clearfix::after {
        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }
</style>
<body>
<div class="head clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

此方法小米,淘宝的官网等目前都依然采用

方法四:给父元素添加overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
        overflow: hidden;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
最终效果

本文章由javascript技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/7cc9d44f-afa2-4a87-b5fd-ce84bf5226c3
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: