什么是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的文章.敬请期待~~同时欢迎大家对于翻译不妥之处进行指正及需要补充的地方进行完善~

所以以下讨论结果都是大家的成果,我只是表达出来,外加自己一些小小想法.

a) 样式的分层管理 
i. 公共规则层 reset base layout-rules …
ii. 公共模块层 header footer …
iii. 项目模块层 频道、店铺、检索… 
iv. 项目文件夹尽量平级，不要多层嵌套
b) 样式的书写 
i. 编码 utf-8避免中文字符造成样式读取问题
ii. 注释 统一
iii. 模块区分，避免代码耦合增加维护难度 
c）CSS代码压缩

样式的分层管理

对于这一问题,大家都赞同”全局-项目公用-页面私有”这三个级别的样式分层.其中reset.css统一了元素默认样式及浏览器之间默认样式的差别,目前网上流行几种reset.css,但并不一定是原封不动的拿来用到自己的项目或网站上就可以了,可以根据自己的需求做些调整.base.css是用于存放网站全局的一些元素的样式,比如button,table,title….当然layout-rules.css是存放网站主要排版样式的文件.

如果是一个很小的个人网站,完全可以将所有样式合在一起,这样服务器请求次数可以减少,将来自己管理升级也十分方便.

但是对于一定规模的大型网站,特别是多人合作的网站,还是要合理分配样式文件,减小耦合,降低文件内容的关联度.不能动一处毁全局.当然具体到颗粒多小还是要根据每个网站情况,以及网站开发方式有关,有些网站的mockup不是一次出来的,很多样式是不可预见到底是否公用的时候,样式文件的分配就比较难做到合理了.这方面我还没有想到什么好的办法解决…

有的同学提出一些不经常变动的样式比如header,footer,nav等样式也可以单独提出来.

也有同学提到了css frame.当然这种框架是为样式管理做出了很好的榜样,一些想法很值得我们学习,但是其中一些class的命名却是以表现来命名的,而不是根据数据内容性质来命名的,这有悖于Web标准的核心理念.另外因为css frame是为了适用于大多数网站,其中肯定会有一些你用不到的样式,结果就是带来好多冗余的代码.所以我个人的观点是以学习为主,尽量不要使用css框架.

还有一些网站有换肤的需求,或者有布局自定义的需求.这时就要考虑将layout,color单独提出来作为一个样式文件了.

对于项目文件夹的放置,理想的情况是根据网站结构走,页面也如此,样式也如此.这样是比较合理的也比较清晰的.

样式的书写

样式的书写我想先说一点自己的习惯,我喜欢一行到底,前面的classname要用tab进阶式的,这样一个模块一个模块看起来非常方便,再加上后面属性有一些指定的排列顺序.hzhjun同学举了一个很形象的例子.他说假如现在桌子上有一台电视机,那么你首先看到的是电视机的大小(width,height),然后是它放在了一张桌子上(position),接着再仔细看这台电视机的具体属性(color,font,…)最后是一些不常用的属性(z-index…).也许这套顺序并不是最科学的,但我觉得一个团队至少要规定一套类似这样的规则,不然一行样式写下来,前面已经写过的样式会很容易被后面的样式覆盖,产生不必要的调试成本.

对于utf-8这个问题,虽然张丽同学给出了补充,但因为公司是做英文网站,所以没有涉及到这类问题,不太了解,因此这里不方便总结了…

关于注释,首先我得承认这方面我做得特别不好,基本上没写过注释.小组成员倒是说了一些他们的注释习惯.比如文件开头会写一些注释,比如这个样式文件是针对哪些模块或页面的,开发者是谁,最后一次修改是什么,有哪些注意事项.然后 每段代码后面如果有相应的bug修改也会注释一下,方便团队成员参考注意等等.

对于模块区分,我觉得这个问题嘛应该不是到了这里才开始考虑的,首先合理的html结构是基石,然后是正确的有语义的class/id命名,接下来再合理地区分模块才会变得更容易.当然原则就是提纲中提到有要避免代码耦合增加维护难度.

最后是CSS代码压缩:

我说说公司的作法吧,开发阶段,我不用担心css的文件个数会产生过多的http request. 因为后台程序会在网站发布之前用一个写好的函数将css文件合并成一个css文件并加个版本号,在这之前还会用一些工具将文件中的空格,缩进以及注释去掉.这些做完之后服务器端的Gzip设置会大大减小文件大小,一般会减小75%左右.

以上是第二主题的交流成果总结~~嘿嘿.明天继续最后一部分素材合理化