浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中, 所以文档的普通流中的块框表现得就像浮动框不存在一样.
CSS 可以通过 float 属性设置浮动. float 属性定义元素在哪个方向浮动. 以往这个属性总应用于图像, 使文本围绕在图像周围, 不过在 CSS 中, 任何元素都可以浮动. 浮动元素会生成一个块级框, 而不论它本身是何种元素.
CSS 设置浮动示例:
- <html>
- <head>
- <style type="text/css">
- img { float:right }
- </style>
- </head>
- <body>
- <p>
- 在下面的段落中, 我们添加了一个样式为
- <b>
- float:right
- </b>
- 的图像. 结果是这个图像会浮动到段落的右侧.
- </p>
- <p>
- <img src="/i/eg_cute.gif" />
- This is some text. This is some text. This is some text. This is some
- text. This is some text. This is some text. This is some text. This is
- some text. This is some text. This is some text. This is some text. This
- is some text. This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text.
- </p>
- </body>
- </HTML>
运行结果:
float 属性:
如果浮动非替换元素, 则要指定一个明确的宽度; 否则, 它们会尽可能地窄.
注释: 假如在一行之上只有极少的空间可供浮动元素, 那么这个元素会跳至下一行, 这个过程会持续到某一行拥有足够的空间为止.
float 属性可能的值:
left 元素向左浮动.
right 元素向右浮动.
none 默认值. 元素不浮动, 并会显示在其在文本中出现的位置.
inherit 规定应该从父元素继承 float 属性的值.
来源: http://www.css88.com/qa/css3/12319.html