BFC的意义和使用

Block Format content(块级格式化上下文)

6,BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明

1)BFC是“Box Formating Context”指得是“块级格式化上下文”,它是一个独立的块级渲染区域,这个区域拥有自己的规则来约束块级盒子的布局,并且这种布局与区域外部无关

a. 浮动,float的值不为none
b. position的值为absolute或fixed
c. overflow 的属性值不为 visible
d. display的值为inline-block、table-cell、table-caption

a,防止外边距合并
b,防止正常文档流中元素占据浮动元素的位置
c,消除文字围绕浮动元素
d,解决浮动元素造成的高度塌陷

7,在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例

1)只有在普通文档流中会出现外边距合并,脱离了文档流的不会出现外边距合并

a,正数的情况下合并外边距最大的数
b,负数的情况下合并绝对值最大的数
c,一正一负的情况下两数带符号相加

a,不同BFC的元素不会外边距合并
b,如果是父子关系,父元素设置了padding或边框也可以阻止父子外边距合并

BFC的意义和使用_第1张图片
图片.png

你可能感兴趣的:(BFC的意义和使用)