说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动?
再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。
这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法;那么如何抓呢?
提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人”吧,那些可恨的梦魇般的浏览器兼容!!!
浏览器中可以自动完成闭合浮动元素的情况:
标准浏览器中可以自动完成闭合浮动元素的方法,在标准浏览器中,这称之为Block-Formatting-Contexts(块格式化上下文):
a.浮动元素;
b.拥有绝对定位属性的元素;
c.设置inline-block元素;
d.table-cell元素;
e.设置了overflow的元素,比如:auto/hidden。
【注】CSS3中,将Block-formatting-contexts 叫做 flow root。
对于触发方式也做了修改:The value of ‘position’ is neither ‘static’ nor ‘relative’;
那么在IE/win中,就依靠那个“hasLayout”了,触发“layOut”的方法有:
a.浮动元素
b.绝对定位元素
c.display:inline-block
d.zoom:比如常见的设置zoom:1;
e.width/height,比如设置height:1%的方法;
f.overflow/overflow-x/overflow-y [IE7 新增];
g.max/min-width/height [IE7 新增];
以上种种方法,要么IEonly,要么cross的情况不理想,于是就产生了适用性方法的需求,尽管有时你可能需要些许hack;
(1)空标签法:
这种方法应该说是最简单的一种了,W3C建议在容器的末尾增加一个“clear:both"的元素,
强迫容器适应它的高度以便装下所有的float,并没限制使用什么样的标签,有用
<br style="clear:both" />
的,有用空
-
<div style="clear:both"></div>
的;比如:
<div> <div style ="float:left; width:40%;" > <p> Some content </ p > </div> <p> Text outside the float </p> <div style ="clear:both;" ></div> </div>
(2)父元素使用overflow的方法:
通过设置父元素overflow值设置为hidden或者auto;不过,在<=IE6中使用这个方法,还需要haslayout,
还有,使用overflow=hidden的时候,一旦你有定位需求可能会因此而难以实现,使用这种方法前你应该至少确定:
a.父元素的height是自适应的;
b.浮动元素的宽度不大于父元素的宽度,即没有溢出需求;所以,这种方法也有它的局限性;
<div style ="overflow:hidden; width:100%;">
<div style ="float:left;width:30%;"> <p>the widths of the combined floats never exceed the width of the container</p> </div> </div>
(3)伪类:after
这种方法应该说是目前应用最广泛的方法,它的优势:没有多余的标记添加到容器中;通过使用:after产生的content不能接受某些属性,包括'position','float',列表属性,表格属性,但是clear属性可以被接受。
不过,不幸的是,IE不支持:after方法,但又幸运的是,回顾前面,如果IE在父容器拥有Width/Height等layout状态下,会完成自动闭合,称之为“auto-clearing”;那么,对于IE/win,我们使用设定zoom:1的方法的方法来实现和:after一样的效果.于是
一个类似这样的样式出现了:
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{zoom:1;} <div class="clearfix"><div style ="float:left;width:30%;" ><p>take :after</p></div>