css——清除浮动

莱德哈特

已于 2024-02-22 23:25:29 修改

阅读量375

点赞数 9

文章标签： css 前端 html5 css3

于 2024-02-22 23:23:48 首次发布

本文链接：https://blog.csdn.net/2301_80174941/article/details/136244986

版权

一、为何需要清除浮动

有时父元素不设置高度，希望根据子元素来撑开父元素。但子元素浮动会导致标准流父元素排版出现问题，下方标准流元素会移动到上方标准流处，所以需要清除浮动。

清除浮动是清除浮动的影响。清除浮动后父元素会根据浮动的子元素自动检测高度。父元素有了高度就不会影响下面的标准流元素了。

清除浮动的策略是闭合浮动，只让浮动再父盒子内产生影响，不影响父盒子外部盒子

二、如何清除浮动

清除浮动属性为clear,属性值有left,right,both，一般both即可。

1、额外标签法

额外标签法，在最后一个浮动子盒子后加一个空标签，执行clear清除。空标签一定要是块级盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .one,
        .two,
        .three {
            width: 300px;
            height: 500px;
            float: left;
            background-color: skyblue;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 600px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <!-- 额外标签法，在最后一个浮动子盒子后加一个空标签，执行clear清除
        空标签一定是块级盒子 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2、伪元素清除法

将这段代码复制调用即可，效果与额外标签法相同。

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将这两段代码复制调用即可，效果与额外标签发相同 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 1000px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .one,
        .two,
        .three {
            width: 300px;
            height: 500px;
            float: left;
            background-color: skyblue;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 600px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="footer"></div>
</body>

</html>

3、双伪元素清除法

同样是复制调用即可，区别在于是前后都进行清除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 同样是复制调用即可，区别在于是前后都进行清除 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 1000px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .one,
        .two,
        .three {
            width: 300px;
            height: 500px;
            float: left;
            background-color: skyblue;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 600px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="footer"></div>
</body>

</html>

4、overflow法

通过给父级元素添加overflow: hidden属性可实现清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            border: 1px solid red;
            margin: 0 auto;
            /* 通过给父级元素添加overflow: hidden属性可实现清除浮动 */
            overflow: hidden;
        }

        .one,
        .two,
        .three {
            width: 300px;
            height: 500px;
            float: left;
            background-color: skyblue;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 600px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="footer"></div>
</body>

</html>