BFC(块级格式化上下文),一个独立的渲染区域,只有块级元素参与,规定了内部块级元素的布局方式,且该区域与外部无关。 BFC元素特性原则:内部子元素在怎么变动都不会影响外部元素。
布局方式:
1,内部BOX会垂直方向上一个接一个放置,所以是从上向下排列。
2,元素的margin左边和父级的左边紧挨,浮动元素也是这样,所以从左向右排列。
3,BOX垂直方向上距离margin决定,单同一个BFC的两个相邻元素的margin会出现外边距合并(overflow 可以解决外边距合并)。
4,BFC是页面上一个隔离的独立容器,内容子元素影响外部元素。
5,计算BFC高度时,浮动元素也参与计算(overflow 清除浮动以后可以撑开盒子高度)。
BFC的生成:
根元素body ,浮动float 不为none ,定位position:absolute/fixed,overflow,display:inline-block/
flex/table-cell。