BFC
它是一个独立的渲染区域,只有Block-level box参与,它规定了内部Block-level Box如何布局,并且与这个区域外部毫不相干
Block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box
BFC 的规则
- a、BFC里面的box都会以垂直方向排列
- b、同一个BFC里面中相邻的两个盒子的外边距会重叠
- c、 每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样
- d、BFC的区域不会和float Box重叠
- e、BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此
BFC的生成
- a、根元素
- b、float属性不为none;
- c、display属性为:line-block,table-cell,line-flex,flex
- d、position属性不为:static,relative;
- e、overflow属性不为:visible
网友评论