floathttps://www.cnblogs.com/starof/p/4608962.html 浮动属性产生之初是

www.cnblogs.com/starof/p/46…

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。

float具有破坏性

这里破坏性是指元素浮动后可能导致父元素高度塌陷。

浮动破坏性原理：因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。（其他破坏性的属性：display:none；position:absolute/fixed/sticky）

应用：实现左右布局

左右布局还可以 float+overflow：hidden

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>
<style>
    .left {
        float: left;
        margin-right: 20px;
    }

    .right {
        overflow: hidden;
    }
</style>