前端技术之BFC

什么是BFC

块级格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域(如:非BFC元素重叠)。

实际上BFC就是HTML元素的一种文本渲染状态，一个HTML文档中的最大的BFC就是根元素，当一个标签满足某些规则是，其本身就是一个BFC模块，BFC内部的元素不受外部元素的影响，定位和浮动都是在最小的BFC模块内进行的

使用BFC规则

1. 内部的box元素都是垂直排布的（行内元素除外）
2. 内部的box元素之间会有margin重叠的问题
3. BFC模块不会和flaot模块重叠
4. BFC内部计算高度的时候会将浮动的元素的高度算到里面，（使用浮动元素将其父元素撑起来）。
5. BFC内部为一个独立的整体，与其他的BFC是隔离的，不会影响到外部元素，也不受外部元素的影响。

超出文本部分隐藏

     overflow: hidden; /*超出部分隐藏*/
	white-space: nowrap; /*超出不换行*/
    text-overflow: ellipsis; /*显示为省略号*/

以上这三行代码是加载需要隐藏的文本的最近的一层标签上的，加载其他地方没有效果

解决两个div的margin重叠的问题

1. 给其中一个div加上边框
2. 在两个div之间增加一个元素（必须有高度的）
3. 将其中一个div的display设置为inline-block

实现BFC模块

position设置为absolute或者fixed
display设置为block
float设置为left，right