在 CSS 中可以通过 float 属性来设置浮动. float 属性定义元素在哪个方向浮动. 以往这个属性总应用于图像, 使文本围绕在图像周围, 不过在 CSS 中, 任何元素都可以浮动. 浮动元素会生成一个块级框, 而不论它本身是何种元素.
float 属性:
如果浮动非替换元素, 则要指定一个明确的宽度; 否则, 它们会尽可能地窄.
注释: 假如在一行之上只有极少的空间可供浮动元素, 那么这个元素会跳至下一行, 这个过程会持续到某一行拥有足够的空间为止.
float 属性可能的值:
left 元素向左浮动.
right 元素向右浮动.
none 默认值. 元素不浮动, 并会显示在其在文本中出现的位置.
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>
运行结果:
浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中, 所以文档的普通流中的块框表现得就像浮动框不存在一样.
浮动的好处当然是布局了, 例如通过浮动来形成三列布局, 文字环绕等等. 但是浮动也有一个问题, 那就是会导致高度的塌陷, 就像上面的图片显示, 父元素的高度塌陷了, 并没有将浮动的子元素包裹进去, 这样子就会造成布局上的错误.
怎么清除浮动?
清除浮动方法大致有两类, 一类是 clear:both | left | right , 另一类则是创建 BFC, 细分又可以分为多种.
1. 通过在浮动元素末尾添加一个空的标签例如并设置样式为 clear:both | left | right , 其他标签 br 等亦可.
- <div class="parent">
- <div class="child"></div>
- <div style="clear: both;"></div>
- </div>
优点: 简单.
缺点: 增加了额外的标签, 并且很显然这并不符合语义化.
* 使用 br 标签和其自身的 HTML 属性, br 有 clear=all | left | right | none; 的属性.
- <div class="parent">
- <div class="child"></div>
- <br clear='all'>
- </div>
优点: 简单代码量少, 比空标签语义化稍好.
缺点: 增加了额外的标签, 并且很显然这并不符合语义化.
2. 使用::after 伪元素 (万金油方法)
ps: 由于 IE6-7 不支持: after, 使用 `zoom:1 触发 hasLayout. 其实是通过 content 在元素的后面生成了内容为空的块级元素
代码如下:
- .clearfix:after {
- content:"";
- display:block;
- height:0;
- visibility:hidden;// 这一条可以省略, 证明请看原文精益求精部分
- clear:both;
- }.clearfix {
- zoom:1;
- }
优点: 结构和语义化完全正确, 代码量居中.
缺点: 复用方式不当会造成代码量增加.
伪元素还有一种写法:
- // 用 display:table 是为了避免外边距 margin 重叠导致的 margin 塌陷, 内部元素默认会成为 table-cell 单元格的形式
- .clearfix:before, .clearfix:after {
- content:""; display:table;
- }
- .clearfix:after{
- clear:both; overflow:hidden;
- }
- .clearfix{
- zoom:1;
- }
3. 父元素设置 overflow:hidden,(PS: 在 IE6 中还需要触发 hasLayout , 例如 zoom:1)
优点: 不存在结构和语义化问题, 代码量极少.
缺点: 由于 hidden 的原因, 当内容增多时候容易造成不会自动换行导致内容被隐藏掉, 无法显示需要溢出的元素, 还会导致中键失效 (鼠标中键).
4. 父元素设置 overflow:auto 属性
优点: 同上
缺点: 多个嵌套后, 会有 bug, 详情看原文.
5. 父元素也浮动
优点: 代码少
缺点: 总不能一直浮动到 body 吧.
6. 父元素设置 display:table
优点: 结构语义化完全正确, 代码量极少.
缺点: 会造成盒模型的改变.
来源: http://www.css88.com/qa/css3/12462.html