1.导航条垂直居中
导航条nav 从左到右分为 nav-left , nav-mid , nav-mid ，怎样达到从左到右依次排列，且全部垂直居中的效果呢？
全部设置float:left , 这样之后才可以方便的使 nav-left, nav-right, nav-right 都垂直居中，只需要设置一次父元素nav的 line-height 等于它的 height 就可以啦~ 1.1 ul>li>a 构成的导航条内部导航水平居中：
ul设置 text-align:center;li和a都设置 display: inline-block; 2.清除父元素的浮动
假设父元素为 wrap ，未设置高度，包含三个子元素 left mid right，需要实现水平三列布局。
首先，对left mid right 三部分应用float: left;并设置合理的宽度，假设都为30%这时由于内部元素全部浮动而脱离文档流，导致父包含块高度无法被撑开，缩成了一条。下面，需要对父包含块做清除浮动。此时，clear:both; 是不好用的，因为它只能应用于清除左侧或右侧的浮动。 方法一、overflow: hidden;
我们需要对父元素应用overflow: hidden; 来清除浮动。原理是 overflow 的值只要不是默认值visible，就触发了 BFC。
内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算
注意最后一条，因为计算BFC高度时，浮动元素也参与计算，所以父元素的高度被撑开。而这也正符合包含块未设置高度（height: auto;）时的裁切准则。因为包含块高度（height: auto;），所以永远不会出现内容超出包含块的情况，因此overflow:hidden应用后，需要计算内部所有元素高度才能进行裁切。
补充下哪些元素会生成BFC：
根元素 float属性不为none position为absolute或fixed display为inline-block,table-cell, table-caption, flex, inline-flex overflow不为visible
方法二、clearfix:after{ ... }
clear属性清除浮动通用方案：.clearfix:after{ ... } 实际上是添加了一个看不见的元素。
主要代码：
.clearfix: after { content: " "; display: block; clear: both; //用于清除浮动：设置了clear:both的块级元素可以清除浮动 overflow: hidden; visibility: hidden;} 将clearfix这个class添加到浮动元素的父元素上，就清除了因为子元素浮动缩成一条的父元素的影响，完整代码见：
3.水平三列等宽布局
水平三列等宽布局 当页面宽度变化时，怎样一直保持三列始终均匀的居中显示？
（实在不知道该怎样简洁的描述“均匀的居中”。。。意思就是左右两列与页面之间的间隙，以及列与列之间的间隙，这四块间隙一样宽。）其实就是考算术的。按照设计稿样式计算3个列以及4个空隙的百分比宽度，让它们相加约等于100%，比如26% * 3 + 5% * 4 = 78% + 20% = 98% //html//css.wrap { margin: 0 auto; width: 400px; background: yellow; overflow: hidden;}.left, .mid, .right { float: left; margin-left: 5%; width: 26%;}.left { background: blue;}.mid { background: pink;}.right{ background: red;}leftmiddleright
效果就是下图介样子：
更多方法参考这篇文章：
4.三行自适应布局：header（定高） + main（高度自适应） + footer（定高）
方法一、position
//htmlheader//css.header {position: absolute;top: 0;left: 0; width: 100%; height: 100px;background-color: pink;}.footer {position: absolute;bottom:0;left:0; width: 100%;height: 100px;background-color: pink;}.main {position: absolute; top: 100px;left:0; bottom: 100px;right: 0;overflow: auto;background-color: yellow;}.content {height: 1000px;}content
header 和footer 的css属性基本一样。
main的设置注意两点：1.用了同时设置top与bottom , left与right，撑开元素的技巧。2.overflow:auto; 用来在内部元素超出时显示进度条。这样在页面高度变化，或者内部的content高度变化时，都始终可以保持正常的三行布局。 
方法二、flex （三行高度自适应 + 两列宽度自适应）
可以直接看
主要代码：
//htmlheader//cssbody { display: flex; flex-flow: column;}.heater, footer { height: 100px; }div.body { flex: 1; display: flex; width: 500px; align-self: center; }//div.body 既做三行flex布局的item，也是两列flex布局的container.side { width: 200px; }.main { flex: 1; } // 其实是flex-grow: 1; 占满剩余宽度的1/n，而这里的n就是1sidemain
可以看到我们的div.body还是水平居中的，其实是我们给.body设置了一个定宽 width: 500px; 加上本元素交叉轴上的对齐方式 align-self: center; 的作用。