网页制作（HTML5+CSS3） 课件ch07玩转文档排版-浮动.pptx

玩转文档排版-浮动

网页制作（HTML5+CSS3）

1

float浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS浮动

请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

2

再请看下图，当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。

如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，