一、基础知识预备

1.什么是文档流？有什么特点？

内联元素默认从左到右流，会自动换行；块级元素默认从上往下排列且单独占据一行。

2.什么是脱离文档流？

一旦元素脱离文档流，父元素的高度计算不包含脱离文档流的元素。 文档流元素会无视已脱离元素的存在，直接进行定位；但是，这里注意，文档流内的元素不会忽视它的存在。例如：

脱离文档流的方法：1. float:left; 2. position: absolute; 3. position:fixed

3.相对定位position:relative是否脱离了文档流？

没有脱离，设置position:relative后，通过top,bottom,right,left改变元素位置，但仅仅是改变显示位置，并未改变实际位置

4.div高度与内部文字的font-size的关系？

div高度与font-size毫无关系，只与字体大小和行高有关系

二、什么是BFC？

BFC，格式化上下文，指的是独立的渲染区域或隔离的独立容器。

同一个BFC内，margin会合并，

三、BFC布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

说了这么一大堆，其实就是div或body内部元素的摆放规则

四、如何创建BFC

• 1、float的值不是none。

• 2、position的值不是static或者relative。

  1和2，其实就是让元素脱离文档流，一旦脱离文档流了，它就不会影响其他元素，也不会被影响

• 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

  让元素变成块元素

• 4、overflow的值不是visible

五、BFC作用

• 避免margin重叠

此时，想让两个box的margin都生效，我们试一试套一个div：

两个盒子的margin都生效了？这里是因为div本身就是块元素，红色div就是一个BFC，而此时红色div和div 2在一个BFC内，所以margin会合并。 由上可知，两个div，margin合并了，要想避免，直接加一个div就可以了。那两个行内元素呢？我们一起来看下：

和预期一样，margin合并了？？？并不是，是因为行内元素设置不了margin-top、margin-bottom、top、bottom、padding-top、padding-bottom、width、height。

• 自适应两栏布局

自适应两栏布局就是一边div宽度固定，另一个div宽度自适应

• 清除浮动 避免高度塌陷。谁的高度塌陷了，我们就对谁动手

我们可以看到最外层的盒子没有把浮动的元素高度计算进去

这样就好了