（css7)、清除浮动的四个方法

最新推荐文章于 2024-08-23 21:59:31 发布

万人之英

最新推荐文章于 2024-08-23 21:59:31 发布

阅读量71

点赞数

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

本文链接：https://blog.csdn.net/wsz123456wsz/article/details/127709495

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

清除浮动

先介绍一个浮动塌陷的例子，在下面的例子中，子元素并没有撑起父容器，产生了塌陷

    <style>
        #container{
            border:1px solid red
        }
        .cube{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float:left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="cube">A</div>
        <div class="cube">B</div>
        <div class="cube">C</div>
        <div class="cube">D</div>
    </div>
</body>

在这里插入图片描述

（1）、clear

css提供了clear属性，这是专门用于清除浮动的
我们可以在父容器里面的最底下，创建一个空的块级元素，然后为其添加上clear属性

    <div id="container">
        <div class="cube">A</div>
        <div class="cube">B</div>
        <div class="cube">C</div>
        <div class="cube">D</div>
        <!--清除浮动-->
        <p style="clear:both"></p>
    </div>

在这里插入图片描述

(2)、BFC

我们可以直接给父容器设置overflow属性，来触发它的BFC，使父元素包裹子元素

<style>
    #container{
        border:1px solid red;
        overflow:hidden;
    }
</style>

(3)BFC

我们也可以直接给父元素设置float，让其变成一个BFC
但是这种方法很少用，因为它会影响到布局

<style>
   #container{
       border:1px solid red;
       float:left
   }
</style>

(4) 伪元素+clear

我们也可以直接给父元素添加一个伪元素，然后为其添加上clear属性

    <style>
        #container{
            border:1px solid red
        }
        #container::after{
            content:'';
            display:block;
            clear:both
        }
    </style>