利用CSS进行网页布局

两列三列布局更好参考

布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
版式设计的范围设计到报纸、杂志、书记装帧、产品样本、挂历、网页页面等平面设计。作为新媒体，网页与传统纸媒在设计上也存在一些不同的地方，主要表现在以下两个特点：网页的宽度可以根据显示器分辨率自适应，网页的长度理论上没有限制。

不改变display属性，用div实现分列自适应布局：

div一列布局：基本上是固定宽度，比如百度首页
一般做法： margin: 0 auto;

<div style="width: 500px; margin: 0 auto;"></div>
本页面所有style代码默认省略：height:500px;background:#ccc;

div二列布局：
一般做法：float: left; float: right;

<div style="width: 20%; float: left;"></div>
<div style="width: 80%; float: right;"></div>

div三列布局：
一般做法：同上,div多列布局以此类推，四列以上的几乎没有

<div style="width: 33.33%; float: left;"></div>
<div style="width: 33.33%; float: left;"></div>
<div style="width: 33.33%; float: right;"></div>

特殊的三列布局：两边列固定宽度，中间列自适应

<div style="width: 200px; position: absolute; left: 0; top: 0;"></div>
<div style="margin: 0 300px 0 200px;"></div>
<div style="width: 300px; position: absolute; right: 0; top: 0;"></div>

混合布局：用的最多，如网站框架布局（如左侧、头部导航，底部栏，页面主体，右侧面板栏）

  <div class="main">
    <div class="left"></div>
    <div class="middle">
      <div class="navbar"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
    <div class="right"></div>
  </div>
  
 .main {
  width: 1000px;
  height: 600px;
  margin: 0 auto;
  background: #ccc;
}
.left {
  width: 10%;
  height: 100%;
  float: left;
  background: blue;
}
.middle {
  width: 80%;
  height: 100%;
  float: left;
}
.right {
  float: right;
  width: 10%;
  height: 100%;
  background: orange;
}
.navbar {
  width: 100%;
  height: 100px;
  background: yellow;
}
.content {
  width: 100%;
  height: 400px;
  background: green;
}
.footer {
  width: 100%;
  height: 100px;
  background: red;
}

页面上的元素就是块与块之间的关系，存在于三种状态：块挨着块、块嵌套着块、块叠压着块。通过css将这些块的位置摆放正确，网页的布局自然就就完美了。

CSS float属性详解：

在网页蛮荒年代，float设计的初衷仅仅是：文字环绕效果。即让文字环绕在图片周围。在现代 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。float浮动属于半脱离文档流，float浮动跟position:absolute一样拥有脱离文档流的功能，但是float虽然脱离了文档流但是仍然会占据位置，其他的文本内容会按照顺序继续排列。

浮动是魔鬼，带来破坏：浮动让父元素高度塌陷。
清除浮动：主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

清除浮动的方法可以分成两类：

一是利用 clear 属性，在浮动元素容器末尾添加一个带有 clear: both 属性的空 div 来闭合元素，或者利用 :after 伪元素在浮动元素容器末尾添加带有clear: both 属性的元素来实现。

/*用伪元素清除浮动*/
.clearfix::after {
    content: '';
    clear: both;
    visibility: hidden;
    display: block; 
    height: 0; 
}

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使该父元素可以包含浮动元素。如给浮动元素的容器添加 overflow:hidden/auto; 来触发BFC可以清除浮动，BFC还可用于实现两栏自适用布局，非常好用。

1. [什么是BFC？](https://zhuanlan.zhihu.com/p/25321647)
Formatting context 是 CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2. 触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
*   body 根元素
*   浮动元素：float 除 none 以外的值
*   绝对定位元素：position (absolute、fixed)
*   display 为 inline-block、table-cells、flex
*   overflow 除了 visible 以外的值 (hidden、auto、scroll)