HTML&CSS2.1中BFC的基础知识汇总

Box Formatting Context

Box：css布局的对象和基本单位
Formatting Context（决定盒子如何渲染的文档）：元素的类型和display属性会决定Box的类型。不同类型的Box，会参与不同的Formatting Context

ps：Box内的元素会以不同方式渲染：
1.block-level box（块元素）:display属性为block，list-item，table的块元素
2.block-level box（内联元素）:display属性为inline，inline-block，inline-table的元素

BFC布局规则

1.内部的box会在垂直方向，一个接一个排列
2.BFC的区域不会与float box重叠
3.同一BFC区域下相邻的box的margin会发生重叠
4.计算BFC的高度时，浮动元素的高度也参与运算
5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

什么时候会生成BFC

根元素
float属性不为none
position为absolute或fixed
4.overflow不为visible
display为inline-block，table-cell，table-caption，flex，inline-flex

bfc实现两列布局

左边设置宽度，右边自适应
左边浮动
右边的div设置overflow：hidden，开启bfc，bfc区域不会与浮动元素重叠

商品描述列内容过多用省略号代替

解决方法（缺一不可）：
white-space:nowraps;
text-overflow:elipsis;
overflow:hidden;