清除浮动的几种方法——浮动元素脱离标准流，会影响页面的排版布局

浮动元素脱离标准流，会影响页面的排版布局，对后面的元素有影响，但不影响前面的元素。

清除浮动：

给父元素添加高度，那么父元素会占据空间而且是标准流，包含了浮动的元素不会影响下面的元素。
给父元素设置了overflow: hidden;属性，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成一个独立的作用域一样，使这个块圾元素内部的排版完全独立隔绝。（涉及BFC）
在父元素内部，最后面添加类名为clear的盒子，设置样式clear: both;
使用纯css方法来解决，给父元素的伪元素after添加display: black; 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>
        .parent {
            border: 1px solid black;
            /* 父元素添加overflow: hidden;可以清除浮动 */
            /* overflow: hidden; */
            /* 添加高度也可以清除浮动 */
            /* height: 200px; */

        }
        /* .clear {
            clear: both;
        } */
        /* 使用纯css方法来解决浮动后父元素的高度问题 */
        .parent::after {
            content: '';
            display: block;
            clear: both;
        }
        .child {
            width: 200px;
            height: 200px;
            float: left;
        }

        .box1 {
            background-color: orangered;
            
        }
        .box2 {
            background-color: orchid;
        }
        .box3 {
            background-color: palegreen;
        }
        .boxa {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child box1"></div>
        <div class="child box2"></div>
        <div class="child box3"></div>
        <!-- <div class="clear"></div> -->

    </div>
    <div class="boxa"></div>

</body>

</html>

清除浮动的几种方法——浮动元素脱离标准流，会影响页面的排版布局

猜你喜欢