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

 

 

 

1. 清浮动

（1）如果可以使用固定高度，可以直接给父级添加固定高度

 

（2）利用<br/>达到清除浮动的效果

 

<br/>换行标签，会在当前位置另起一行，如果希望在当然已有内容的下一行进行         输出，可以添加一个属性 clear（可选值：left、right、all）

<br clear="all"/>

 

（3）使用clear属性清除浮动

clear的写法

A. clear: left;

B. clear: right;

C. clear: both;

D. clear: none;

1. E.  

 

 

clear的特性

- 只会对写在它前面的浮动元素起效，后面的清除不了

- 清除指定方向的浮动

- 只有添加给块标签才是有效的，并且是具有独占一行效果的块（加了浮动的不行哟）

 

（4）利用伪元素清除浮动

div::after{

content: '';

display: block;

clear: both;

}

 

Δ after给当前父级添加一个，处于最后位置的子元素（clear只对前面的元素有效）

Δ content 添加内容

Δ display:block 只有添加给块标签有效

Δ clear:both 同时清除左右方向的浮动

注：上述任何一项都不可以丢！！

 

（5）父级触发BFC