浮动的元素会对它后面的元素造成影响

341 阅读1分钟

浮动的元素会对它后面的元素造成影响:

浮动的理解:

一个浮动的元素只会对它后面的元素造成影响,不可能对它前面的元素造成影响。

一个 右浮动 的元素,先向  上  飘,飘到 父元素边界 时停止,然后向 右 飘,飘到  父元素的边界就停止了。


让三个DIV浮动,有多种组合方式,如下:

只有一个元素浮动的情况下:
[右, , ]
[, 右, ]
[, , 右]
[左, , ]
[, 左, ]
[, , 左]
有两个元素浮动的情况下:
[右,右, ]
[, 右,右]
[右, ,右]
[左,左 ,]
[, 左,左]
[左, ,左]
[左,右 ,]
[左, ,右]
....
三个元素都浮动的情况下:
[左,左,左]
[左,左,右]
[左,右,左]
[右,左,左]
[右,右,右]
[右,右,左]
[右,左,右]
[左,右,右]
只有一个元素浮动的情况下:

[右, , ]


[, 右, ]


[, , 右]


[左, , ]


[, 左, ]


[, , 左]


有两个元素浮动的情况下:

[右,右, ]


[, 右,右]


[右, ,右]


[左,左 ,]


[, 左,左]


[左, ,左]


[左,右 ,]


[左, ,右]


....
三个元素都浮动的情况下:
[左,左,左]
[左,左,右]
[左,右,左]
[右,左,左]
[右,右,右]
[右,右,左]
[右,左,右]
[左,右,右]


记住几句话:
1)浮动的元素只会对它后面的元素造成影响
2)如果一个元素没有浮动,这个元素肯定会独占一行
3)浮动步骤:先上向 再向左/向右 停止
4)两个浮动的元素会并排显示