清除浮动的方法
清除浮动方法大致有两类, 一类是
clear:both | left | right
, 另一类则是创建 BFC, 细分又可以分为多种.
通过在浮动元素末尾添加一个空的标签例如并设置样式为
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>
优点: 简单代码量少, 比空标签语义化稍好.
缺点: 同上.
使用::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;
- }
父元素设置 overflow:hidden,(PS: 在 IE6 中还需要触发 hasLayout , 例如 zoom:1)
优点: 不存在结构和语义化问题, 代码量极少.
缺点: 由于 hidden 的原因, 当内容增多时候容易造成不会自动换行导致内容被隐藏掉, 无法显示需要溢出的元素, 还会导致中键失效 (鼠标中键).
父元素设置 overflow:auto 属性
优点: 同上
缺点: 多个嵌套后, 会有 bug, 详情看原文.
父元素也浮动
优点: 代码少
缺点: 总不能一直浮动到 body 吧.
父元素设置 display:table
优点: 结构语义化完全正确, 代码量极少.
缺点: 会造成盒模型的改变.
其余的参考上面如何创建 BFC.
来源: http://www.bubuko.com/infodetail-2677943.html