[分享]css中子盒子与父盒子都浮动

浮动是CSS布局中常用的一个属性，它可以使元素位置进行调整，但在使用浮动时需要注意子盒子和父盒子的关系。当父盒子和子盒子都设置了浮动属性时，在浮动元素所在的容器中，父盒子将会发生高度塌陷，导致子盒子溢...

浮动是CSS布局中常用的一个属性，它可以使元素位置进行调整，但在使用浮动时需要注意子盒子和父盒子的关系。

当父盒子和子盒子都设置了浮动属性时，在浮动元素所在的容器中，父盒子将会发生高度塌陷，导致子盒子溢出父盒子。这时候需要清除浮动，避免出现问题。

 .parent {
        float: left;
        width: 300px;
        background-color: #ccc;
    }

    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #f00;
    } 

上述是一个典型的子盒子和父盒子都浮动的情况，可以看出子盒子的高度大于父盒子，而且父盒子发生了高度塌陷，这时候我们需要在父盒子的最后面加上一个空标签，通过设置样式清除浮动，达到消除高度塌陷的效果。

 .clearfix:after {
        content: "";
        clear: both;
        display: block;
    } 

通过加上类名为clearfix的空标签，并且设置清除浮动的样式后，子盒子与父盒子的浮动就可以正常进行了，达到了理想的视觉效果。