1. 引言
CSS常见布局方式有很多种，如table布局、浮动布局、flex/grid布局、响应式布局等。这里先介绍浮动布局，其他布局方式后续补充。
2. 浮动布局
浮动布局是通过属性float实现。其实float属性并不是用来布局的，它的本质是为了实现文字环绕效果。因此，很多人认为它不应该用来布局，但我个人觉得如果了解其原理，用它解决项目中实际需求，也未尝不是一种微小的嫁接创新，虽然违背了它的设计初衷。
float元素的特性：
（1）脱离文档流，但不脱离文本流；
（2）形成块并格式化上下文【BFC】；
（3）不影响其他块级元素位置，但影响其他块级元素内部文本；
（4）导致父级元素高度塌陷
所以有人说浮动元素是恶魔，这话一点都不假。它不仅影响自身，还影响其兄弟节点、父节点元素的位置。
了解了这些基本概念和原理，现在来看看用它能实现哪些布局？
2.1 一侧定宽一侧自适应
html代码如下：
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
css代码如下：
.demo1{
border:1px solid red;
overflow:hidden;
}
.demo1-div1{
width:200px;
height:100px;
border:1px solid blue;
float:left;
}
.demo1-p1{
border:1px solid grey;
margin:0px;
margin-left:220px
}
2.2 两栏宽度不固定布局
html代码如下：
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
test test test test test test
css 代码如下：
.demo2{
border:1px solid red;
overflow:hidden;
}
.demo1-div2{
width:50%;
height:100px;
border:1px solid blue;
float:left;
}
.demo1-p2{
border:1px solid grey;
margin:0px;
margin-left:50%;
padding-left:20px;
}
2.3 BFC自适应布局
这里简单介绍一下BFC，BFC即块级格式化上下文。如果一个元素具有BFC，那么它的子元素再什么变化也不会影响外部元素，同时，外部元素也不会影响BFC元素的子元素，可以说BFC就是一个封闭空间。因此BFC可以用来清除浮动和去margin重叠，但除了这些两个功能外，可以实现自使用布局。
那么什么时候触发BFC呢？常见的情况如下：
（1）根元素
（2）float的值不为none
（3）overflow的值为auto、scroll和hidden；
（4）display的值为table-cell、table-caption、inline-block中任何一个
（5）position的值不为relative和static
用的最多的情况是：overflow：hidden
下面是使用BFC实现两栏自适用布局，它的好处是不用右边栏的宽度，从而可以实现大规模复用。
html代码如下：
left
content content content content
content content content content
content content content content
content content content content
content content content content
css代码如下：
.demo3{
border:1px solid red;
}
.right{
float:right
}
.left{
float:left;
}
.bfc{
overflow:hidden;
}
.demo3-div1{
min-width:100px;
}
.demo3-div2{
background-color:grey;
}
2.4 三栏布局
这里主要是实现两侧固定宽度中间自适应布局方式，包括一般实现方式和两个经典布局方式（圣杯布局和双飞翼布局）。
2.4.1 三栏布局的一般实现方式
html代码如下：
上一篇
下一篇
这是文章题目
css代码如下：
.demo4{
border:1px solid red;
overflow:hidden;
}
.demo4-div1{
float:left;
}
.demo4-div2{
float:right;
}
.demo4-title{
margin:0px 80px;
text-align:center;
}
2.4.2 圣杯布局
html代码如下：
middle
left
left
left
left
left
left
left
left
left
left
left
left
right
css代码如下：
.c{
padding:0px 200px;
overflow:hidden;
}
.middle,.left,.right{
float:left;
min-height:100px;
position:relative;
}
.middle{
background:red;
width:100%;
}
.left{
background:green;
width:200px;
margin-left:-100%;
left:-200px
}
.right{
background:yellow;
width:200px;
margin-left:-200px;
right:-200px;
}
2.4.3 双飞翼布局
html代码如下：
middle
left left left left
left left left left
right
css代码如下：
.c{
overflow:hidden;
}
.main,.left,.right{
float:left;
min-height:100px;
}
.main{
background:red;
width:100%;
}
.left{
background:green;
width:200px;
margin-left:-100%;
}
.right{
background:yellow;
width:200px;
margin-left:-200px;
}
.content{
margin:0px 200px;
border:1px solid black;
}
圣杯布局和双飞翼布局都用到了负边距，负边距可以让元素向左，向上移动，达到覆盖前面元素的效果。使用负边距会使元素让出原来的空间，这一点是和相对定位最大的区别。想深入了解负边距，可以参考文后的参考链接。
2.5 多列等高布局
通过浮动+padding补偿法实现。
html代码如下：
leftleftleftleft
leftleftleft
cenere
hhhh
hhhh
hhhhh
hhhh
hhhh
hhhhh
hhhh
hhhh
hhhhh
right righ
hhhh
hhhh
hhhhh
css代码如下：
.demo2{
width:100%;
border:2px solid red;
overflow:hidden;
}
.demo2-left{
float:left;
width:20%;
background-color:grey;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.demo2-right{
float:left;
width:20%;
background-color:green;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.demo2-center{
float:left;
width:60%;
background-color:yellow;
padding-bottom:2000px;
margin-bottom:-2000px;
}
3 参考资料
（1）《css世界》-- 张鑫旭
（2） CSS布局奇淫巧计之-强大的负边距
（3） CSS布局奇淫技巧之-多列等高
（4）圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例