CSS 浮动流

浮动流：

1.什么是浮动元素的脱标?

脱标: 脱离标准流 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

3.浮动流排序规则：

 3.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

3.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

3.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定（这个要仔细分析一下浮动的过程，按照顺序一次让应该浮动的元素进行浮动，当前元素在哪一行就在哪一行浮动）

4.浮动贴靠现象：

1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边（如果父元素不够，会继续往上一级寻找）

5.浮动元素字围现象：

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

6.注意：

在标准流中内容的高度可以撑起父元素的高度 ，在浮动流中浮动的元素是不可以撑起父元素的高度的

写法：

.box1{
            float: left;/*right就是右浮动*/
            width: 100px;
            height: 100px;
            background-color: red;
        }