浮动

1. 浮动

脱离文档流

• 父元素高度塌陷

设置float之后

• 浮动特点，是脱离当前的文档流，它是以自己最初的位置开启浮动的，与定位不一样。
• 如下，三个div原本是这样的

• 我们分别给left 和 right设置浮动，此时left 脱离当前文档流，center可以顶上来，right脱离文档流，但仍在它对应的一列中，并不能浮动到其他的块级元素上

--所以三列布局-两列固定，中间自适应的利用浮动，应该是先left、right再center 如下，这样left、right脱离了文档流，跑到了同一行，下面的center就可以顶上去

• 三栏布局 - 定位实现，right 要么放中间，要么需要考虑top:0

2. 清除浮动 如果我们不希望，中间元素受到浮动影响，我们可以设置给他设置清除浮动

   1. clear属性

2. 在浮动元素后增加一个块级元素 - 也是设置clear属性

3. 在具有浮动元素的父元素尾部增加伪元素::after -也是设置clear属性，达到清除浮动的效果

4. 给浮动元素增加overflow属性

• 值只要不为visible（指元素不可以被裁减，并且超出范围）即可
  

• 这里其实是用到了BFC 块级格式化上下文的概念
  

本质只有两种 清除浮动clear 和 BFC

BFC 块级格式化上下文

如下是一个高度塌陷的情况

1. 设置float 不为none

2. overflow 不为visible(默认值)

3. position 为 absolute、Fixed

4.display: inline-block flex grid table-cell

BFC 解决的问题

1. 子元素顶部 与 父元素顶部 margin 重叠问题

2. 两个相邻子元素 margin 重叠问题--通过给其中一个包裹div并使用BFC解决 如果margin一个是 负数 一个是正数，两者也是有折叠部分的

3. 包裹浮动元素，清除内部浮动

4. BFC 元素不会与floatBox重叠