关于浮动，一直存在一些误解

一，浮动是什么

首先需要了解下文档流，普通文档流中，元素是按照从上到下，从左到右的顺序进行排列的；在这个排列的过程中，又会存在行内元素和块级元素，它决定了元素是否独立占据一行。

float元素是是指定一个元素沿着容器的左侧或右侧放置，准许文本或者内联元素环绕它。该元素从正常文档流中删除，尽管保持部分流动性。 (MDN)

二，简单的方法理解浮动

块级元素

块级元素中的子元素仍然遵循环绕性

<div class="wrapper">
    <div class="child1">浮动元素</div>
    <div class="child2">
        <div class="child2-inner">普通块级元素内部内（。。。省略300字）</div>
    </div>
</div>

.wrapper {
    border: 1px solid green;
    .child1 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        float: left;
    }
    .child2 {
         background: yellow;
        .child2-inner {
            border: 1px solid blue;
        }
    }
  
}

111.png

== haha ==

三，浮动的特性

四，清除浮动