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

  • 时间:
  • 浏览:
  • 来源:互联网

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

清除浮动:

  1. 给父元素添加高度,那么父元素会占据空间而且是标准流,包含了浮动的元素不会影响下面的元素。
  2. 给父元素设置了overflow: hidden;属性,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,使这个块圾元素内部的排版完全独立隔绝。(涉及BFC)
  3. 在父元素内部,最后面添加类名为clear的盒子,设置样式clear: both;
  4. 使用纯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>

本文链接http://element-ui.cn/article/show-153827.aspx