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布局和绝对定位布局的几种经典布局的具体实现示例

CSS布局篇

CSS布局篇

1. 引言

2. 浮动布局

2.1 一侧定宽一侧自适应

2.2 两栏宽度不固定布局

2.3 BFC自适应布局

2.4 三栏布局

2.4.1 三栏布局的一般实现方式

2.4.2 圣杯布局

2.4.3 双飞翼布局

2.5 多列等高布局

3 参考资料

推荐阅读更多精彩内容