BFC ，替换元素&非替换元素 以及盒子模型BOX

**什么是BFC？

Block Formatting Context(BFC).

那麽在这里我先讲解一下元素
一.元素按照自身分类可以分为两种：
a：替换元素 b：非替换元素

a：替换元素就是根据浏览器的“标签和属性”，来决定元素的具体内容例如：浏览器的< img>标签的src属性的值来读取图片信息并显示出来，而如果查看x（html）代码，则看不到图片的实际内容；又例如根据< input>标签的type属性来决定显示输出框还是单选按钮等。

a替换元素：xhtml中 < img > < input > < textarea> < object>都是替换元素简单的来说替换元素可以改变**“height”和“width”并且能生效**
1.< img src=“cow.jpg”>
2.< input type=“submit” name=“Submit” value=“提交”>

b：不可替换元素：就是不可替代的< p>标签一般里面的内容都直接可以看得到并且全部都显示出来的。
1.< p>显示的内容< /p>

注意：替换元素一般有内在尺寸，所以具有“width”和“height”，可以设定。对于表单元素，浏览器也有默认样式，包括“宽度”和”高度“

**二.盒子模型的Box预备知识： **
在解释BFC之前要先了解 Box、Formatting Context概念

Box:CSS布局的基本条件

解释：Box是CSS布局的对象和基本单位，就是一个页面有和多个Box组成的。元素的类型和display属性，决定了这个Box的类型不同类型会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内会以不同方式渲染

CSS2.1中
Box分为两种“盒元素”

1. block-level box（块级盒元素）：display属性为block，list-item列表，table表格得元素，会生成block-level box。并且参与了block fomatting context
2. inline-level box（内联级盒元素）：display属性为inline，inline-block，inline-table得元素，会生成inline-level box，并且参与block fomatting context
3. run-in box：是css3中得样式

重点：BFC直译为“块级格式化上下文”。他是一个独立渲染的区域码，只有block-level box参与他规定了内部block-level box如何布局，并且与这个区域外部毫不相干

既然我们了解了以上得内容那么现在正式讲解一下BFC
三.BFC布局规则：

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

既然知道BFC了 那我们了解如何触发BFC呢？

1. 属性不为none

2. position为absolute和fixed

3. display为inline-block，table-cell，table-caption，flex，inline-flex

4. overflow不为visible其为默认值

BFC解决问题------总结

1. （1）解决两栏布局问题（2）边距重叠问题（3）清除浮动影响–解决单线问题
2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素反之也如此
3. 以为BFC内部的元素和外部元素绝对不会相互影响，因此，当BFC外部纯在浮动式他应该不影响BFC内部BOx的布局，BFC会通过变窄，而不予浮动有重叠，同样的，当BFC内部有浮动是，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样一个道理

*****超重点激活BFC想要不影响祖先元素，以上四个条件中， 首选条件为overflow：hidden