[译][部分][clear float]不通过添加额外标签来清除浮动
这些天看了些CSS方面的书,做了些笔记,做个记录并且share一下
前言:原文在这里 http://positioniseverything.net/easyclearing.html
看懂英文和译成汉语完全是两码事儿啊, 翻译的各种不专业, 并且只译了和标题有关的部分内容(米有精力能力通篇来啊), 但是我没翻译的内容也非常重要! 都是一些issue啊, 技巧神马的, 有时间最好看看.
正文:
---------------------
clear float的老办法
当一个带有可见边框/背景图的容器框内包含一个float元素的时, 就算float元素会因为过高以至超出了容器的下边框线, 那么float元素也不会自动向下调节容器的下边框来让其包围下自己. 而是无视外面容器, 像一面旗子一样挂下来(PS. 想像旗杆是横着的...).只熟悉IE的人就会说了"不是这样的!" IE能所谓'自动的'把float元素包含进它的容器内, 但是容器必须要带有只有IE才能识别的属性hasLayout.
IE的这个功能在鼠标悬停在容器内的link上时也可能暂时失效, 如果鼠标悬停改变了link的背景或其它CSS属性的话. 挺乱, 我们在后面的"Toggle Trouble"部分讨论它.
W3C建议在容器最后放一个定义了"cleared"的标签, 这样容器的高度就会改变来把 "cleared" box 上面的float元素给容纳进去.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
注意{display: block;}也得有, 因为如果不加的话, 元素默认为是inline, inline元素是没有clear属性的.Tony的原始代码里也用了{overflow: hidden;}来隐藏'句号', 但悲剧的是最新的火狐浏览器还是会显示出'句号'.
IE怎么办?
由于IE7还不支持:after伪类, 只能依靠IE6的"自动清除float"功能, 但是要包含浮动元素的容器带有hasLayout属性. 简单定义{zoom: 1;}就可以了.并且要将其隐藏.
