浮动流

浮动脱标

脱标: 脱离标准文档流。当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标。
浮动元素脱标之后的影响：
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。

image.png

浮动元素排序规则

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

<style>
         .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
</style>

image.png

2. 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动;

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: right;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
</style>

image.png

3. 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定。

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
</style>

image.png

浮动元素贴靠现象

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

   
   image.png

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

   
   image.png

3. 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边。

   
   image.png

浮动元素字围现象

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

   div{
            float: left;
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            border: 1px solid #000;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }