清除浮动的三种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CamilleZJ/article/details/77718891

以上方法3是目前最为推荐的

font-size:0;line-height:0也是清除浮动的常用方法

强制标签在一行可以设置为弹性盒模型display:flex;


清除浮动 or 闭合浮动(Enclosing float or Clearing float)?

1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;

2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。


<div class="wrap" id="float1">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

清除浮动:wrap内部设置了浮动,wrap外的.footer未解决受浮动影响而自身进行clear:both,但是wrap高度未被撑起

闭合浮动:wrap内部设置了浮动,防止wrap外其他元素受影响,而自身或内部解决浮动问题。

如上,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决wrap高度塌陷的问题。

闭合浮动方法:(以上说的三种也是闭合浮动)

1)添加额外标签(以上方法1)

优点:通俗易懂,容易掌握

缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。

2)使用 br标签和其自身的 html属性

这个方法有些小众,br 有 clear=“all | left | right | none” 属性,即把1)中添加的无意义标签换成<br clear="all" />

优点:比空标签方式语义稍强,代码量较少

缺点:同样有违结构与表现的分离,不推荐使用

3) 父元素设置 overflow:hidden

在IE6中还需要触发 hasLayout ,例如 zoom:1;即为.warp添加样式style="overflow:hidden; *zoom:1;"

优点:不存在结构和语义化问题,代码量极少

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;04年POPO就发现overflow:hidden会导致中键失效,这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

4) 父元素设置 overflow:auto 属性

同样IE6需要触发hasLayout,演示和3差不多

优点:不存在结构和语义化问题,代码量极少

缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等, 不要使用
5) 父元素也设置浮动
优点:不存在结构和语义化问题,代码量极少
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用
6) 父元素设置display:table
优点:结构语义化完全正确,代码量极少

缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

7) 使用:after 伪元素

注  :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多闭合浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。

由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点:结构和语义化完全正确,代码量居中

缺点:复用方式不当会造成代码量增加

以上总结:通过对比,不难发现,其实以上列举的方法,无非有两类:

其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

其二,通过设置父元素 overflow 或者display:table 属性来闭合浮动(原理:Block formatting contexts 块级格式化上下文,只要能触发BFC的都可以解决浮动问题)


目前解决浮动最推荐的就是方法7),讲解如下:

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;

5)zoom:1 触发IE hasLayout。

参考:http://www.iyunlu.com/view/css-xhtml/55.html

展开阅读全文

没有更多推荐了,返回首页