浮动流元素排列规则

浮动流元素排列规则

1相同方向上的浮动元素

先浮动的元素会显示在前边，后浮动元素会显示在后边

.box1 {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;    
}

2.不同方向上的浮动

左浮动会找左浮动，右浮动会找右浮动。

.box1 {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}

.box2 {
    width: 150px;
    height: 150px;
    background-color: pink;
    float: left;
}
.box3 {
    width: 100px;
    height: 100px;
    background-color: tomato;
    float: right;
}
.box4 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    float: right;
}

3.浮动元素之后的位置

由浮动前的标准流中的位置来确定。(浮动流是一种半脱离标准流的排版方式)

.box1 {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}

.box2 {
    width: 150px;
    height: 150px;
    background-color: pink;

}
.box3 {
    width: 100px;
    height: 100px;
    background-color: tomato;
    float: left;
}
.box4 {
    width: 200px;
    height: 200px;
    background-color: skyblue;

}

总结：

1.页面布局有浮动流和标准流时，页面会先将所有的浮动流剔除，但是他们默认位置（块级元素的默认位置依次排列），他们自己记得。等所有的标准流按照自己的顺序从上向下排列好了，浮动流再依次加入自己的原有位置，如果下边有元素就浮动在上边，同向的元素紧贴（但也是在自己原来位置上紧贴）

.box1 {

    width: 50px;
    height: 50px;
    background-color: red;
    
}

.box2 {

    width: 150px;
    height: 150px;
    background-color: pink;
    float: left;

}

.box3 {
    width: 200px;
    height: 100px;
    background-color: tomato;
    
}
.box4 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    float: left;
}

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>