1. 横向布局
(1) 转化为inline-block
- 注：元素换行会产生空格，给父级加font-size:0;进行处理
- 注：转化为inline-block之后记得给元素加上vertical-align:top;（默认基线对齐 方式改为顶部对齐，处理底部出现空隙的问题）
(2) 浮动
- 注：记得清除浮动
2. 文档流（normal flow）
文档流，也叫正常流、普通流。
指页面中的默认布局：元素从左至右、从上到下显示。
3. BFC（Block Formatting Context ）块级格式化上下文
一个独立渲染区域的名称（布局环境的名字），只有Block-level box参与，它规定了内部的Block-level box 如何布局，并且不影响BFC区域以外的内容，当然BFC以外的也影响不了里面的。
在这一套规则下面，【元素里面的内容不会干扰元素外面的内容】，所有的元素都会按照文档流的排列方式进行排列。
（1）BFC的作用：
- 包含浮动元素，解决父级高度塌陷问题
- 阻止margin的传递
- 不被浮动元素覆盖
（2）BFC的触发条件：
- float值不为none;
- overflow值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute 、 fixed