21.BFC
BFC 块级格式化上下文,BFC规定了在当前元素中块元素的布局方式,默认只有一个标签body是块级上下文标签
1.BFC 特点
1.BFC 是一个独立的布局环境,BFC内部额布局和外部不会相互影响
2.可以通过一些方法触发BFC,完成一个独立的布局环境
2.BFC的布局规则
1.BFC内部块元素,会从上到下一个一个的垂直排列
2.BFC 规定了 两个相邻的块元素他们的上下margin重合
3.每一个元素的margin 盒模型的左边(margon-left),与包含他的父border 盒模型的左边(border-left)相接触
4.每一个BFC区域不会个浮动的元素重叠
5.每一个BFC区域都是独立的,里面的内容和外面的内容相互不影响
3.创建一个BFC的方法
1.给元素添加 overflow:,注意它的值 visible 除外
2.给元素设置浮动,注意 浮动值 none除外
3.给元素设置 position ,它的值是 fixed 或者 absolute
4.给元素设置 display,他的值为 flex。inline-flex、table-cell、inline-block