I'm Donkey

所有关于浮动(Float)的事情[倔倔译]

Apr 13

Ting倔倔在前端 clear, CSS, float, overflow hidden, 清除浮动 4 Comments

英文原文:http://css-tricks.com/all-about-floats/

什么是Float?

Float是一个CSS定位属性.想要搞懂它的目标跟初衷,我们可以来看看平面印刷设计.在一个平面布局中,图片是可以根据需要被文字环绕的放在页面中.这通常被称为”文字环绕”.如下图所示:

在页面布局中,包含文本的盒子可以让文字换行或者忽略换行.忽略换行就会让文字流向右边就像图片不存在一样.这就是图片是与不是页面中的”流”的区别.网页设计也是相类似的.

在网页设计中,被赋予了CSS Float 属性的页面元素就会像印刷布局中被文字环绕的图片一样.浮动的元素仍是网页流中的一部分.这与使用绝对定位的网页元素有着很大的区别.被绝对定位了的元素是被网页流移除掉的元素,就像印刷布局中被告知忽略页面换行一样.被绝对定位了的元素不会影响其它元素的定位并且其它元素也不会影响它们,不管它们之间是否接触到了.

用CSS设置一个元素为浮动的情况是这样:

#sidebar {
   float: right;
}

这里有四种浮动值.Left和Right将元素分别向这两个方向浮动.None(默认值)确使元素不会浮动,Inherit会使元素继承父级元素的浮动值.

浮动元素用来做什么?

除了让文字围绕在图片周围的例子,浮动元素还可以用来产生整体网页布局.

在一些小规模的布局中浮动也是非常有帮助的.看一下网页中的这个小区域.如果你在我们的小头像图片上应用浮动,当图片改变大小时盒子中的文字也会相应的调整流向.

也可以使用容器相对定位而头像绝对定位来完成相同的布局.这种做法,文字将不会受头像影响并且也不会根据大小改变而重新调整流向.

清除浮动

浮动的姊妹属性是clear.一个被赋予了clear属性的元素将不会向上移动到浮动元素的旁边,但它会将自身向下移动以越过浮动元素.拿出一个实例比文字说明更直观.

在上面这个例子中,侧边栏被浮动到了右边而且比Main Content的高度要矮.于是Footer就被要求跳上来补足由浮动元素产生的空间.要解决这个问题,footer可以被设为clear来确保它在所有浮动的列之下.

#footer {
   clear:both;
}

Clear也有四个可用值.Both是最常用的,用来清除来自各个方向的浮动元素.Left和Right分别来用清除各自方向上的浮动.None是默认值,通常来讲是无用的除非是要将样式中的clear值去掉的情况下才用.Inherit是第五个属性值,但它在IE中几乎不被支持.只清除左边或只清除右边浮动看似没有被广泛使用,但它的确有用武之地.

伟大的断裂

在运用浮动元素的过程中一件很令人费解的事情就是如何让它们去影响包含它们的容器(它们的”父级”容器).如果一个元素除了包含浮动元素不包含其它元素的话,它的高度将是0.如果父级容器没有明显可见的背景色时,这一点通常是不明显的,但它又是必须要注意的很重要的一点.

与这种直觉上的反差相比更糟糕的是考虑以下情况:

如果上面这个块级元素自动扩展以适应浮动元素的话,那么我们就会在段落之间的文本流中得到一个不自然的空隙,也没有特别有效的解决方法.在这种情况下设计师们会非常抱怨,这比我们对断裂做出处理更加让人痛苦.

断裂通常需要做些处理用以阻止产生奇怪的布局和一些跨浏览器兼容问题.我们在浮动元素之后父级容器之前来清除浮动.

几种清除浮动的方法

如果你所处的情况是你总是知道随后而来的元素是什么,那么你可以给元素的clear属性设置为both,然后继续做你的事情.这是理想情况,不需要任何虚假的hack技术跟多余的元素而是完全符合语义的.当然事情总不会按照这种方式进行并且在我们的工具箱中需要更多清除浮动的工具.

• 空div方法:顾名思义,一个空的div.<div style=”clear: both;”></div>.有时你会看到一个<br/>元素或者其它不常见的元素,但是div是最常用的一个,因为浏览器没有赋予它默认样式,也没有特别功能,一般不太可能被冠以通用CSS样式.这种方法不受语义纯粹主义者的重视是因为它对于页面没有任何实际内容跟语义仅仅是为了显示.当然从严格的角度来讲它们是正确的,可是它起到了自己应该起到的作用也没有伤害到其它任何人.
• overflow方法:需要给父级容器设置overflow属性.如果父级容器被设为auto或者hidden,那么容器就会自动扩展去包容里面的浮动元素,实际上是为了它之后的元素清除浮动的.然后如果你发现自己新加了一个div仅仅是为了应用这一点属性,那么这就跟加一个空div是一样缺少语义的了,同样是很难被接受的.需要记住的是overflow属性并不仅仅是为了清除浮动.小心不要隐藏了内容或者触发了不想要的滚动条.
• 简单清除方法:使用CSS伪类选择器(:after)去清除浮动.你需要添加一个类似”clearfix”的class来解决这个问题,而不是在父级容器上设置overflow属性.然后应用这样的CSS:

.clearfix:after {
   content:".";
   visibility:hidden;
   display:block;
   height:0;
   clear:both;
}

不同的情况需要用不同的清除浮动的方法.看下面这个网格结构块,每一个都不同类型.

为了视觉中更好的展示相似块,我们想要按照我们的意愿插入新的一行,这里是指按颜色差异.如果第一组都有一个父级容器的话我们可以就用overflow或者是简易清除方法.又或者我们在每一组之间使用空div方法.三个之前本来不存在的换行div还是三个后加的div.我将交给你来决定哪一种更好.

浮动产生的问题

浮动通常是因为很脆弱而被击败.它主要的脆弱表现是来自于IE6和大量存在的与浮动相关的bug.因为越来越多的设计师们放弃支持IE6了,你可能也不关心了,但是对于那些还很关心的朋友们这里还是有一些快速解决的方法.

• 下推:是指一个浮动元素里面的元素比本身浮动的元素宽(特别是图片).大部分浏览器会将图片渲染在浮动元素外面,但是没有影响其它部分的布局.IE则会扩大浮动元素去包含图片,而破坏了布局.一个常见的例子就是main content里的图片过宽而将侧边栏推到下面了.
  
  快速解决:确定你没有任何这样的图片,使用overflow:hidden来切掉多余部分.
• 双边距Bug-在解决IE6问题上另外一个需要注意的就是如果你给一个浮动元素在浮动方面加了一个外边距的话,就会产生双边距.
  快速解决:给浮动元素设置为display:inline,并且不用担心,它仍然还是一个块级元素.
• 3像素是指当文字紧挨着一个被浮动的元素时就会被一种强大的外边像外踢3像素.快速解决:给文字设一个宽度或者一个高度.
• 当在IE7中,底部外边距Bug是如果一个浮动的父级容器里还有一个浮动的子元素,这些子元素的底部外边距就被父级窗容器忽略掉了.
  快速解决:快速解决:用父级容器的底部内边距代替.

其它

如果你需要文字环绕那些图片的话,没有比浮动更适合的了.谈到这,可以参看更聪明的方法一文,描述如何让文字围绕不规则图形.但对于网页布局,这里确实有几种选择.Eric Sol 在A List Apart上有一篇关于”山寨版绝对定位“的文章,非常有意思地通过多种途径来对比浮动布局的灵活性跟绝对定位的优势.CSS3有布局模板,当它被广泛接受时,就会被证实为网页布局的又一选择.

===============分隔线===============

倔倔总结:

还有一篇小文章也是关于浮动问题的http://css-tricks.com/containers-dont-clear-floats/

近日还将翻译一篇A List Apart上关于block和inline的文章.敬请期待~~同时欢迎大家对于翻译不妥之处进行指正及需要补充的地方进行完善~