css浮动

使用float（浮动）可以实现元素在盒子中的左右布局。如下图所示：

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            border: 2px solid red;
            background-color:pink;
            margin: 0 auto;
                }

        .box .a,
        .b {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
    </style>
    
    <div class="box">
        <div class="a">123</div>
        <div class="b">456</div>
    </div>

但是使用float会使元素脱离标准流布局，造成父盒子塌陷。

解决盒子塌陷的方法有4种。

第一种给父盒子添加属性overflow:hidden,但是如果是下拉列表的情况，超出的会隐藏。

.box {
            width: 500px;
            border: 2px solid red;
            background-color:pink;
            margin: 0 auto;
            overflow: hidden;
        }

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

.box {
            width: 500px;
            border: 2px solid red;
            background-color:pink;
            margin: 0 auto;
            height: 100px;
        }

第三种方式是个父盒子里面添加一个div，设置clear：both清除两边的浮动即可，但是会多出一个div元素，显得很多余

        <div class="a">123</div>
        <div class="b">456</div>
        <div style="clear:both;"></div>
    </div>

第四种清除浮动的方法是给父盒子添加伪类::after。

.box::after{
            content: '';
            display: block;
            clear: both;
        }