使用float实现盒子的左右布局并解决塌陷的4种方法

<title>使用float实现盒子的左右布局</title>
<style>
    *{margin: 0;padding: 0;}
    #a{
        border: 3px solid rebeccapurple;         
        width: 560px;
        /* overflow: hidden; */
        /* overflow:hideen 可以解决浮动造成的塌陷问题 */
        /* 使用浮动时，必须要给父元素添加overflow解决父盒子塌陷 */
    }
    /* 给.a .b 设置相同样式 */
    .b,.c{
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* 使用display: inline-block;会产生一条缝隙 */
        /* display: inline-block; */
        float: left;
    }

    /* 
    标准流布局
    使用float: left;脱离了标准流布局
    给父元素造成盒子塌陷问题
    */
    /* 解决盒子塌陷的方法  */
    /* 第一种 */
    /* overflow:hideen 可以解决浮动造成的塌陷问题 ，但是使用下拉列表的情况，超出的会隐藏 */
    /* 使用浮动时，必须要给父元素添加overflow解决父盒子塌陷 */

    /* 第二种 */
    /* 给父盒子固定高度，但子盒子变多会溢出  */

    /* 第三种 */
    <!-- <div style="clear: both;"></div> -->
    /* 给父子里添加一个div设置clear:both 清除两边的浮动  ，但会多一个div，显得多余*/
    
    /* 第四种 */
    /* 伪类 */ /* content不写值 */
    #a:after{
        content: '';
        display: block;
        clear: both;
    }
</style>