首先简单讲一下盒模式，所谓盒模式，是CSS看待元素的方式，CSS将每个单一的元素都看作一个盒子，如下图所示：
开发学习心得4——CSS盒模式与排版-">
之所以叫它盒模式，是因为它跟我们日常生活中的盒子非常相似，这里不多说了。CSS中大部分的属性都是用来控制content的，比如width、height、color等；padding、border、margin都是可选的，其中，padding、margin表示的是一片空白区域，只能控制其大小，border是一个可见的边框，可以控制其边框样式、粗细、颜色等。
下面主要讲一下排版。
在正常情况下，浏览器从HTML文件的开头开始，从头到尾依次呈现各个元素，块元素从上到下依次排列，内联元素在块元素内从左到右依次排列。而CSS的某些属性却能够改变这种呈现方式，这些属性就是这里要讲的，主要是float与position属性，另外还有clear属性以协助float，z-index属性协助position。这些属性值均无法继承。
float属性定位：
float属性值可以为left、right、none。none为默认值，表示不漂移该元素，浏览器以正常方式显示之，不必多说。若设置为left或right，则表示将该元素漂移到左方或右方。那什么叫漂移？
简单地说，漂移是指将某元素从正常流中抽出，并将其显示在其父元素的左方或右方的一个过程。这样说想来你还不一定明白，那么我们就分步骤来看一下浏览器是如何来漂移某元素的。
假设我们有以下html，为了能更清楚地看到布局，我们将各个部分都加上了一个红色的边框，并给段落加上橙色的背景色，源代码如下:
html
<body>
<div id="header">
<h1>
这里是头部。</h1>
</div>
<div id="content">
<div id="leftbar">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
<div id="main">
<p>
这里是主区域。</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
</div>
</div>
<div id="footer">
<p>
这里是脚部。</p>
</div>
</body>#header, #footer, #content, #leftbar, #main
{}{
border: solid 1px red;
}
p
{}{
background-color: Orange;
}
这段html在浏览器中将显示如下: