css3浮动以及清除浮动防止父级塌陷的方法一。浮动 float属性值说明 left 元素向左浮动 right 元素向右

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

一。浮动

float属性值说明
left 元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动

 <div class="box">
    <header>
        <span class="left">热门活动</span>
        <span class="right">更多</span>
    </header>
    <main style="overflow: hidden;">
        <li class="a">
            <img src="./img1.png" alt="">
            <p>推荐活动|原创音乐现金榜T榜</p>
        </li>
        <li class="b">
            <img src="./img2.png" alt="">
            <p>推荐节目《TAImusic》爆笑来装</p>
        </li>
        <li class="a">
            <img src="./img3.png" alt="">
            <p>推荐歌单│继续宠爱张国荣</p>
        </li>
        <li class="b">
            <img src="./img4.png" alt="">
            <p>
                推荐活动|330金压音乐巡演成都小酒馆音乐空间
            </p>
        </li>
    </main>
</div>



<style>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .box {
        width: 700px;
        margin: 0 auto;
    }

    header {
        height: 30px;
    }

    header .right {
        float: right;
        padding-right: 66px;
        padding-top: 5px;
        font-size: 13px;
    }

    header .left {
        float: left;
        margin-left: 10px;
        padding-top: 5px;
        font-weight: bolder;
        font-size: 17px;
    }

    li p {
        padding: 5px 0;
    }

    main li {
        float: left;
    }

    main .a {
        padding-left: 20px;
    }

    main .b {
        padding-left: 30px;
    }
</style>

小结：清除浮动，防止父级边框塌陷的四种方法
1、浮动元素后面加空div

            设置clear:both 必须是块元素
               < div style="clear:both">< /div>简单，空div会造成HTML代码冗余

2、设置父元素的高度
简单，元素固定高会降低扩展性

3、父级添加overflow属性

            <body style="overflow: hidden"></body>简单，下拉列表框的场景不能用

4、父级添加伪类after body::after{ content: ; 在clear类后面添加内容为空

display: block; 把添加的内容转化为块元素

clear: both; 清除这个元素两边的浮动}

写法比上面稍微复杂一点，但是没有副作用，推荐使用二。 .div{ width: 100px;
height: 100px;
border:1px solid red;
overflow: visible; （默认值。内容不会被修剪，会呈现在盒子之外）

overflow: hidden; （内容会被修剪，并且其余内容是不可见的）

overflow: scroll; （内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 🔺横向和纵向都会展示滚动条）

overflow:auto; （如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 🔺只会在需要的地方添加滚动条）}