CSS清除浮动的方式

我认为清除浮动应该分为两部分:包含块外清除浮动与包含块内清除浮动. 包含块外当然就是指的 clear: both; 清除的浮动, 是用来避免块元素间的对齐问题; 而我们目前大家所说的CSS清除浮动一般都是指的包含块内清除浮动,这也是技术在不断发展, 布局技术在不断进步的必然结果, 详细的布局方面思考会在以后总结一下.

总归一下我使用过的包含块内部清除浮动方式:

• 包含块和其子块同时float
• clear: both;
• :after
• overflow:hidden

包含块和其子块同时float

例如这个例子:

<div style="float:left; width:100%; background:#000; color:#ddd">

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>

</div>

可以看到, ie6,7是由于width触发了hasLayout,而包含块浮动是针对其它浏览器起作用的.对于布局上来说,不是很方便,而且如果有很多子块的时候,每一个都得去控制浮动, 多么惨的事呢.

clear: both;

<div style="background:#000; color:#ddd" >

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>
	<div style="clear:both;"></div>
</div>

使用这种方法,倒是不会出现什么大乱子,但是在html文本中必须使用额外的空标签去做清除的工作,对于追求标准的我们,这是不可容忍的.

:after

<style type="text/css">
.clear:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear{*zoom:1;}
</style>
<div style="background:#000; color:#ddd"  class="clear">

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>

</div>

对于使用:after伪类选择符这个恐怕是现金为止认为最安全的方式了,各大css框架要么在布局上下功夫而不使用clearfix,要么就是使用的这种方式, 但各家清除的方式又存在细微差别.
例如, tjkdesign提出了在使用:after的同时,也要使用:before.例子

overflow:hidden

<style type="text/css">
body {background:#333;font:1em Arial, Helvetica, sans-serif;}
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}
h2 {font-weight:normal;font-size:1.15em;padding-bottom:5px;border-bottom:1px solid #999;}
p {padding-right:1em;color:#000;}
pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {background:#ececec;overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;border-right:1px solid #000;border-top:1px solid #fff;border-left:1px solid #fff;}
.css {float:right;width:50%;}
.markup {float:left;width:50%;margin-right:-1px;}
.box1,
.box2,
.box3,
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}
.box1 {left:0;top:0;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:0;bottom:0;}
</style>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">
<h2>Markup</h2>
<pre>&lt;div id=&quot;wrapper&quot;&gt;

  &lt;div class=&quot;box1&quot;&gt;box 1&lt;/div&gt;
  &lt;div class=&quot;box2&quot;&gt;box 2&lt;/div&gt;
  &lt;div class=&quot;box3&quot;&gt;box 3&lt;/div&gt;

  &lt;div class=&quot;box4&quot;&gt;box 4&lt;/div&gt;
&lt;/div&gt;</pre>
<p>If this wrapper was <em>positioned</em> (any value other than static), then it would become the positioning block and the four nested boxes would position themselves in relation to its layout. They would also be clipped outside of the positioning block boundaries.</p>
</div>
<div class="css">
<h2>CSS</h2>

<pre>#wrapper {
  overflow:hidden;
  zoom:1;
}
.box1,
.box2,
.box3,
.box4 {
  position:absolute;
  background:#fff;
}
.box1 {left:0;top:0;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:0;bottom:0;}</pre>
</div>
	  <div class="box1">box 1</div>
		<div class="box2">box 2</div>
		<div class="box3">box 3</div>
		<div class="box4">box 4</div>
</div>

对于这个例子,我想是最好的解决了clearfix的烦琐和overflow:hidden的截断问题,因为overflow触发了Block Formatting Contexts, 而zoom是给ie6和7用的. 而内部box具有了’position:absolute;’, 就不会受这个overflow的限制. 但是这会有一个问题:我测试了两台纯ie6环境, 都没有通过.其他浏览器都ok(包括ie8的兼容模式).

会触发block formatting contexts的元素包括:

• floats
• absolutely positioned elements
• inline-blocks
• table-cells
• table-captions
• elements styled with “overflow” (any value other than “visible”)

所以使用 ‘display: inline-block;width: <any explicit value>;’ 也是可以达到兼容性的.
欢迎交流指正.

参考阅读

• clearfix Reloaded + overflow:hidden Demystified
• Block Formatting Contexts
• All About Floats

什么是 CSS Grid

它是一种基于栅格布局体系的CSS框架.而这里所谓”框架”,其实质只是由普通CSS编写,并具有最大化复用程度的代码集合.

为什么要用 CSS Grid

就像萝卜白菜一样,每个人都有自己所选所爱,我们的设计人员同样如此.而为页面制作中的视觉设计提供一种规范的思想,能够很大程度上的提高前端开发与设计人员之间的和谐程度.但这只是一种思路而已,并不能作为统一的标准.如果想在自己的团队中推行,需要很大的成本去完善各个环节.

推荐的 CSS Grid 方式

下面就看看我现今觉得可以在中型项目中使用的一种布局方式:

/* **************** GRIDS ***************** */
.line:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.lastUnit:after{content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";visibility:hidden; clear:both;height:0 !important;display:block;line-height:0;}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {display: table-cell; *display:block;*zoom:1;float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}

其实,这是OOCSS中的百分比布局思想.推崇这种 CSS Grid 方式有以下的几个原因:

• 具有宽度自适应的先天优点,尤其是在手持设备成为未来趋势的今天.
• 条理清晰,维护便利
• 其中 .lastUnit 具有宽度自适应的优点,意味着不论前面放了多少的Unit(当然,前提是要比Unit总数小的),它都不会被”挤”下来.
• 可以方便的自定义宽度,只需使用时在基本布局宽度后面加上自定义的class.
• 利于设计人员理解与学习(个人的经验是,这样的思维比单纯的栅格化更利于设计人员接受).

当然,这样的布局并不一定适合项目,需要根据需求进行修改,例如,我的这个博客就没有使用 CSS Grid,因为DesiZen的布局足够的简单,但是借鉴了其布局的 .lastUnit,大家可以发现没有使用float,因此,无论我怎么改变左面的宽度,右面都可以伸缩自如.

什么是CSS Reset

顾名思义,Reset即为”重置”的意思,CSS Reset就是要重置CSS样式.但是,CSS Reset绝不仅仅是为了清除html元素默认表现,而是为了更好的统一各种浏览器下面的表现从而使得我们避开各种浏览器BUG所带来的问题,所以,”重置”这个词很恰当.需要注意的是:Reset不是万能的!随着时间的流逝和技术的进步,Reset也应相应的变化.

Reset CSS能够达到使浏览器”统一”表现的作用.对于比较大点的项目,好处更加的明显.然而,CSS reset却并没有一个”一统江湖”的唯一标准.个人认为,CSS reset应该根据各种项目和不同需求去定制一套”最适合”的,因为并不是所有的html元素都会在一个项目里面出现.

使用哪种CSS Reset

目前有三个CSS Reset方案可供我们使用:

• KISSY CSS Reset 1.0
• YUI 3 CSS Reset
• Eric CSS Reset

对于这三套方案,我更倾向于射雕的KISSY CSS Reset,原因是:更适合中国国情.当然,这三套方案都不是适合于你直接使用的,因为没有最好,只有最适合.你需要根据你的需要进行添加,修改或者删除.这里有一些延伸阅读可以帮助你进行接下来的工作:

• 打造自己的reset.css
• Dawn CSS Reset

展望未来的 HTML5 CSS Reset

html5是个不那么新鲜的事物了,大家纷纷去”体验”超前的技术.然而,html5要真正的铺开来,还有待时日.但是国外的同学总是那么的”超前”于我们,这不,对于html5的CSS Reset已经出来了:

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

对于其的讨论实在激烈,英文好的可以看这里:html5doctor,我认为,其目前只适用于尝鲜使用,毕竟,我们还在IE6呢.

针对移动设备的 Mobile CSS Reset

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0;
 border: 0;
}

body
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

参考:http://www.vcarrer.com/2010/11/css-mobile-reset.html

附上个便于理解的slider:

对CSS Reset的质疑

任何事物有支持,那么必然也会有反对的,CSS Reset同意如此;这就像矛与盾,从哪个方面看都是正确的,只是,我们中国来说,项目需求普遍是阿里系的容貌,所以,不得不去”快速开发”.而NO CSS Reset,需要的是非常扎实的基础与相当丰富的经验.参考:No CSS Reset.