1. 引言
CSS常见布局方式有很多种，如table布局、浮动布局、flex/grid布局、响应式布局等。这里先介绍浮动布局，其他布局方式后续补充。
2. 浮动布局
浮动布局是通过属性float实现。其实float属性并不是用来布局的，它的本质是为了实现文字环绕效果。因此，很多人认为它不应该用来布局，但我个人觉得如果了解其原理，用它解决项目中实际需求，也未尝不是一种微小的嫁接创新，虽然违背了它的设计初衷。
float元素的特性：
（1）脱离文档流，但不脱离文本流；
（2）形成块并格式化上下文【BFC】；
（3）不影响其他块级元素位置，但影响其他块级元素内部文本；
（4）导致父级元素高度塌陷
所以有人说浮动元素是恶魔，这话一点都不假。它不仅影响自身，还影响其兄弟节点、父节点元素的位置。
了解了这些基本概念和原理，现在来看看用它能实现哪些布局？
2.1 一侧定宽一侧自适应
html代码如下：
<div class='demo1'>
<div class='demo1-div1'></div>
<p class='demo1-p1'>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
</p>
</div>
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代码如下：
<div class='demo2'>
<div class='demo1-div2'></div>
<p class='demo1-p2'>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
test test test test test test <br>
</p>
</div>
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）<html>根元素
（2）float的值不为none
（3）overflow的值为auto、scroll和hidden；
（4）display的值为table-cell、table-caption、inline-block中任何一个
（5）position的值不为relative和static
用的最多的情况是：overflow：hidden
下面是使用BFC实现两栏自适用布局，它的好处是不用右边栏的宽度，从而可以实现大规模复用。
html代码如下：
<div class='demo3 bfc'>
<div class='left demo3-div1'>left</div>
<div class='bfc demo3-div2'>
content content content content <br>
content content content content <br>
content content content content <br>
content content content content <br>
content content content content <br>
</div>
</div>
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代码如下：
<div class='demo4'>
<div class='demo4-div1'>上一篇</div>
<div class='demo4-div2'>下一篇</div>
<h3 class='demo4-title'>这是文章题目</h3>
</div>
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代码如下：
<html>
<body>
<div class="c">
<div class="middle">middle</div>
<div class="left">
left<br>left<br>left<br>left<br>
left<br>left<br>left<br>left<br>
left<br>left<br>left<br>left<br>
</div>
<div class="right">right</div>
</div>
</body>
</html>
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代码如下：
<div class="c">
<div class='main'>
<div class="content">middle</div>
</div>
<div class="left">
left</br> left</br> left</br> left</br>
left</br> left</br> left</br> left</br>
</div>
<div class="right">right</div>
</div>
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代码如下：
<div class='demo2'>
<div class='demo2-left'>
left</br>left</br>left</br>left
</br>left</br>left</br>left
</div>
<div class='demo2-center'>
cenere </br><br>hhhh<br>hhhh<br>
hhhhh<br>hhhh<br>hhhh<br> hhhhh
<br>hhhh<br>hhhh<br> hhhhh
</div>
<div class='demo2-right'>
right righ</br><br>hhhh<br>hhhh<br> hhhhh
</div>
</div>
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布局和绝对定位布局的几种经典布局的具体实现示例
网友评论