标签：
1.float属性能把网页元素移到网页（或者其他外围快）的某一侧。出现在浮动元素之后的所有HTML都能在网页中上移，环绕在浮动元素的周围。
float属性接受以下3种不同的值：left（左）、right（右）和none（无）。假设要把一张图片移到网页的右侧，可以创建下面这个类样式，并把它应用到<img>标签上：
.floatRight { float: right; }
将该属性应用到一个装满内容的<div>标签上时，还可以创建一个侧边栏：
.sidebar {
float: left;
width: 170px;
（1）把每一列都包在一个带有ID或class属性的<div>标签里面。
（2）把侧边栏<div>浮到右侧或左侧。
（3）给浮动的侧边栏设定一个宽度。
（4）给正文添加一个left margin。
2.多种方法解决叛逆浮动元素。
（1）在外围div的底部添加一个清除元素。
（2）浮动外围元素。
（3）利用overflow：hidden。
（4）使用Micro Clear Fix。
3.CSS的box-sizing属性可以让Web浏览器用一种不同的模式来计算元素的实际屏幕宽度。它接受以下3个值之一：
（1）content-box值是浏览器正常的计算方式，即屏幕上元素的宽度为left/right border厚度、left/right padding以及CSS width属性值得总和。
box-sizing：content-box；
（2）padding-box值是让浏览器要包含left/right padding。换句话说，元素的显示宽度为CSS width以及left/right padding的总和。它不包括元素周围的任何border
box-sizing：padding-box；
（3）最后一个border-box属性，包含padding、border以及CSS的width。一般来说，这回是你想要使用的那一个。它使这个算术变得很简单，有助于防止float drop，当你使用基于百分比的宽度，并且给border宽度和padding使用基于pixel单位的时候，尤其如此：
box-sizing：border-box；
4.搭建HTML结构
（1）在文本编辑器中打开start.html文件，并单击HTML注释(<!--first sidebar goes here-->)后面的空行。
（2）给侧边栏添加一个开始的<aside>: <aside class="sidebar1">.
（3）打开未见sidebar1.txt，复制所有的内容，然后回到start.html文件
（4）立即在你刚刚粘贴上的代码后面输入</aside>。
（5）把光标放在这个HTML注释（<!--main content goes here-->）后面的空行上，然后输入<article>标签后面。
（6）打开文件main.txt，复制所有的内容，返回start.html文件，然后把代码粘贴到刚创建的<article>标签后面。
5.创建布局样式
（1）在文本编辑器中，打开styles.css文件。
（2）将光标滚动到CSS文件的底部，你会看到一条CSS注释，写道：/*add tutirial styles below here */。在它下方添加以下样式：
.sidebarl {
float: left;
width: 20%;
}
（3）保存HTML和CSS文件，并在Web浏览器中预览start.html文件。
（4）给第2个列创建一个样式：
.main {
margin-left: 22%;
}
再添加一列
（1）打开文件sidebar2.txt。从文件中复制所有的HTML，然后返回start.html文件。
（2）在文件底部附近找到HTML的注释<!-- second sidebar goes here -->
（3）输入<aside class="sidebar2">,按回车键，然后粘贴在第1步中复制的HTML代码。
（4）在文本编辑器中打开styles.css文件。
（5）保存所有文件，并在Web浏览器中预览start。html文件。
（6）编辑.main样式，使它看起来像这样：
.main {
float: left;
width: 60%;
}
（7）在.sidebar2样式的后面再添加一个样式：
footer {
clear：both；
}
6.添加一些空间
（1）在.sidebar1、 .main和.sidebar2样式中添加padding，使样式像这样：
.sidebar1 {
float: left;
width: 20%;
padding: 0 20px 0 10px;
}
.main {
float: left;
width: 60%;
padding: 0 20px 0 20px;
}
.sidebar2 {
float: right;
width: 20%;
padding: 0 10px 0 20px;
}
（2）在样式表中再添加一个样式：
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
（3）在.main样式中添加一个left/right border，像这样：
.main {
float: left;
width: 60%;
padding: 0 20px;
border-left: dashed 1px rgb（153,153,153）；
border-right： dashed 1px rgb（153,153,153）；
}
7.将流式布局和固定宽度设计混合
（1）在styles.css文件中，删除刚才创建的.pageWrapper样式。
（2）在styles.css文件中，再添加一个样式：
nav ul， header h1， footer p {
max-width： 1200px；
margin：0 auto；
}
（3）在文本编辑器中打开start.html文件。
（4）向下滚动到HTML文件的底部。
（5）在群组选择器中添加新的类，像这样：
nav ul， header h1， footer p， .contentWrapper {
max-width: 1200px;
margin: 0 auto;
}
标签：
原文地址：http://www.cnblogs.com/koto/p/5071527.html
