[译][部分][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元素给容纳进去.

引用

"..我们给一个标签clear属性,{ clear: both; }.这样就会增加它的上边距,使它往下移动直到移出上边float元素的底边框.换句话说, 浏览器会增加这个标签的margin-top值(不管它被定义成了多少)直到让这个cleared box位于float元素的下面."

所以这样的cleared box必须在float元素的下面.

外部容器包含内部的float标签的标准方法就是在其最后加一个定义了"cleared"的标签, 这样做的效果就像是把容器的下边框线拽到了 float 标签的下边. 这样, float标签看上去就像是被容器包围进去一样. cleared box代码通常如下:

<div> <!-- float container -->
  <div style="float:left; width:30%;"><p>Some content</p></div>
  <p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

这种方法带来的问题

第一并且最主要是,要求添加一个额外的标签到代码里,这办法一点也不直观. 且CSS的主要作用就是用来减少HTML代码的臃肿. 所以用增加HTML代码来实现把float包含进它们的容器中不是一个好主意.
并且,有些浏览器处理clear元素也可能出问题, Mozilla特别容易受影响.
一直以来都没有啥好的解决办法, 但是现在有了!感谢Tony Aslett, csscreator.com的主人, 在非IE浏览器里用高级CSS来清除float并且保持在IE里其自己的处理方法.我们可以选择不用那种烦人的让HTML代码里添加clear标签的办法啦!

"Clearing", 21世纪流行款式~(^.^)

新的方法中不用添加clear的标签. 并且它只针对非IE浏览器有效, 不会影响IE自己处理float元素的方法.

使用 :after

这个CSS 2属性允许你通过CSS在一个元素的末尾添加内容.相当于不用在HTML中加额外的标签. 添加的内容在CSS样式表里被指定, 显示在页面上时就像插入了一个正常的HTML标签一样. 由 :after 插入的内容不能指定某些CSS属性, 包括position, float, list 属性, 和 table 属性. 然而 clear 属性是允许的.

设想我们用:after插入一个简单的字符比如说一个'句号', 然后定义它{clear: both;}.就样就可以了, 不过没人想在最下面留一个空行来弄乱容器, 所以我们使用了{height: 0;}和{visibility: hidden;}来不显示我们加的'句号'.

.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;}就可以了.并且要将其隐藏.