清除浮动

最新推荐文章于 2024-10-15 23:52:46 发布

hello_xujj

最新推荐文章于 2024-10-15 23:52:46 发布

阅读量85

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/xjj19999272/article/details/116715332

版权

CSS 专栏收录该内容

18 篇文章

订阅专栏

清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响.

清除浮动方法1

让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            overflow: hidden;
            margin-bottom: 10px;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

</html>

下图时清除浮动前和清除浮动后的网页效果图：
在这里插入图片描述

清除浮动方法2

给后面的父盒子设置clear:both属性。 clear表示清除浮动对自己的影响，both表示左右浮动都清除。示例如下：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box2 {
            margin-top: 20px;
            clear: both;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>

</html>

下图时清除浮动前和清除浮动后的网页效果图：
在这里插入图片描述

清除浮动方法3

使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。示例代码如下：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: '';
            clear: both;
            /* 转为块级元素 */
            display: block;
        }

        div {
            margin-bottom: 10px;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
</body>

</html>

清除浮动前和清除浮动后的网页效果图跟方法1一样.

清除浮动方法4

在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }

        .cl{
            clear: both;
        }

        .h20 {
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="cl h20"></div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

</html>