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;