<!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>
        /* 浮动的特性：
        1.脱标 脱离标准流控制浮动显示
        2.行排列顶部对齐
        3.具有行内块元素特性 不管什么元素，添加浮动后，都有行内块元素特性 */

        /* 注意： 
        1.浮动和标准流搭配 
        先用标准流父元素排列上下位置，之后子元素采取左右排列 
        2.一个元素浮动，理论上其余的兄弟元素也要浮动 
        浮动的盒子只会影响后面的标准流，不会影响前面的  */
        .fst {
            width: 200px;
            height: 400px;
            background: red;
            float: left;
        }

        .sec {
            width: 400px;
            height: 600px;
            background: rgb(0, 242, 255);
            float: left;
        }

        .tir {
            width: 600px;
            height: 600px;
            background: rgb(34, 255, 0);
        }



        /* 清除浮动 */
        /* 1.额外标签法 */
        .clear {
            clear: both;
        }

        .clflt {
            background-color: pink;
            width: 150px;
            height: 150px;
            float: left;
            margin-right: 5px;
        }

        .box {
            border: 5px solid black;
            width: 400px;
            margin-top: 20px;
        }

        .next {
            background-color: rgb(192, 255, 225);
            width: 150px;
            height: 50px;
            margin-top: 5px;
        }

        /* 2.为父级添加overflow */
        .clflt {
            background-color: pink;
            width: 150px;
            height: 150px;
            float: left;
            margin-right: 5px;
        }

        .box {
            overflow: hidden;
            border: 5px solid black;
            width: 400px;
            margin-top: 20px;
        }

        .next {
            background-color: rgb(192, 255, 225);
            width: 150px;
            height: 50px;
            margin-top: 5px;
        }

        /* 3.after伪元素法 */
        /* 给父元素添加clearfix */
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* 照顾低版本浏览器 */
        .clearfix {
            *zoom: 1;
        }

        /* 4.双伪元素清除 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="fst">注意</div>
    <div class="sec">注意</div>
    <div class="tir">注意</div>
    <br><br><br>
    <div class="box clearfix">
        <div class="clflt"> 1</div>
        <div class="clflt"> 2</div>
        <div class="clflt"> 3</div>
        <div class="clflt"> 4</div>
        <div class="clflt"> 5</div>
        <div class="clear"></div>
    </div>
    <div class="next"></div>
</body>

</html>

下载链接：

浮动.html