浮動流元素排列規則

浮動流元素排列規則

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;

}