清除浮动的方法 - 码农教程

直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div{
            width: 500px;
            color: white;
            border: 5px solid red;
            /* 第五种方法  给其父元素也添加浮动 （不提倡） */
            /* float: left; */
            /*
             第一种方法 
             给其父元素添加overflow:hidden;可以快速的用简单的代码实现
             */
            /* overflow: hidden;   */
            /* 
             第二种方法 
             给其父元素添加适合的height；
             */
            /* height: 300px; */
        }
        .div .fle,.rig{
            width: 50%;
            text-align: center;
            height: 300px;
            line-height: 300px;
        }
        .div .fle{
            background-color: aqua;
            float: left;
        }
        .div .rig{
            background-color: blueviolet;
            float: left;
        }
        /* 
         第三种方法 
          在父元素结束之前添加一个带有clear：both；属性的盒子优点 ：可以多次使用，且不必知道其他内容
         */
        /* .clear{
            clear: both;
        } */
        /* 
         第四种方法
         给父元素设置after 伪元素 实际与第三种类似
         */
        /* .div:after{display:block;clear:both;content:"";visibility:hidden;height:0} */
    </style>
</head>
<body>
    <div class="div">
        <div class="fle">左侧内容</div>
        <div class="rig">右侧内容</div>
        <!-- <div class="clear"></div> -->
    </div>
</body>
</html>
原文地址：https://www.cnblogs.com/GreenRadish/p/11311359.html