发表于： 2019-11-06 20:42:39
1 742
1.BFC是什么
定义：一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
2.怎样才能形成BFC
float的值不为none。
overflow的值不为visible
display的值为table-cell, table-caption, inline-block中的任何一个
position的值不为relative和static
css3中flex boxes
fieldset元素
3.BFC的作用
包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度，这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
不被浮动元素覆盖 浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建BFC 后可以阻止这种情况的出现
4.BFC规则
内部的Box会在垂直方向，从顶部开始一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与float box叠加
返回列表
评论