[分享]css中float的实效情况

CSS中的float属性可以让元素浮动，通常用于布局。但是，有些情况下不当使用float可能会产生一些不必要的问题。首先，float如果没有清除会导致父元素高度塌陷。例如： .floatlef...

CSS中的float属性可以让元素浮动，通常用于布局。但是，有些情况下不当使用float可能会产生一些不必要的问题。

首先，float如果没有清除会导致父元素高度塌陷。例如：

 <div class="parent">
        <div class="float-left"></div>
        <div class="float-left"></div>
    </div>

    <style>
        .float-left { float: left; }
    </style> 

上面的代码可以在布局时让两个子元素并排，但是由于没有清除float，父元素的高度会被子元素撑开而使之塌陷。

其次，float可能会导致元素重叠。例如：

 <div class="parent">
        <div class="float-left" style="width: 50%;"></div>
        <div class="float-left" style="width: 50%; margin-left: -20px;"></div>
    </div>

    <style>
        .float-left { float: left; }
    </style> 

上面的代码可以让两个子元素并排，但是由于第二个子元素设置了负margin，导致它们重叠在一起，造成不良影响。

最后，float可能会影响元素的层级关系。例如：

 <div class="parent">
        <div class="child-A"></div>
        <div class="child-B float-left"></div>
    </div>

    <style>
        .float-left { float: left; }
    </style> 

上面的代码会让子元素B浮动，但是它的层级关系也会因此改变，不再在父元素的下面。

所以，在使用float属性时，我们应该注意清除float、避免重叠和保持正确的层级关系。同时，也可以考虑使用flexbox等新的布局技术来替代float。