一：传统网页布局的三种方式

标准流
浮动 float
定位 position

1 标准流

元素按照其在HTML中的先后位置从上到下进行布局
行内元素水平排列，块级元素被渲染成完整的新行

2 浮动 float

根据浮动的方向改变元素在标准流中的位置，其他盒子会占用它原来的位置

float: none    元素不浮动
float: left    元素向左浮动
float: right   元素向右浮动

3 定位 position

position: static     默认        不会脱离原文档流
position: relative   相对定位     不会脱离原文档流
position: absolute   绝对定位     会脱离原文档流
position: fixed      固定定位     固定在页面中的某个位置

二：BFC

1 BFC 是什么？

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，它是一个独立的渲染区域。一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

如代码所示, .box是一个 BFC 区域，它包含item1 item2 item3 但是不包含 item3 下的两个 p 标签

<div class="box">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3">
      <p></p>
      <p></p>
    </div>
</div>

2 BFC 触发条件是什么？

只有当这个元素满足下面的任意一个条件，才能被当作是BFC区域

body 根元素
设置浮动，不包括 none
设置定位，absoulte 或者 fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

3 BFC 解决哪些问题？

3.1 margin塌陷

正常情况下，两个盒子之间的 margin 应该是 50*2 = 100px,最终只显示了 50px,这就是 margin 塌陷，这个时候只需要给两个盒子设置 BFC,就不会相互影响

3.2 包含塌陷

给子元素添加 margin-top时，父子一起向下移动

给父元素设置BFC独立区域

3.3 清除浮动

以上代码，父元素没有设置高度，子元素自动撑开父元素

当子元素全部设置浮动时，父元素失去了原有的高度

这个时候给父元素设置BFC,清除浮动