临武县网站建设专业,怎么把网站整站下载,南京市浦口区建设局网站,上海58招聘网最新招聘本篇详细介绍FC的概念#xff0c;以及BFC的作用#xff1a;FC的全称是Formatting Context#xff0c;元素在标准流里面都是属于一个FC的.块级元素的布局属于Block Formatting Context#xff08;BFC#xff09; -也就是block level box都是在BFC中布局的#xff1b; 行内…本篇详细介绍FC的概念以及BFC的作用FC的全称是Formatting Context元素在标准流里面都是属于一个FC的.块级元素的布局属于Block Formatting ContextBFC -也就是block level box都是在BFC中布局的 行内级元素的布局属于Inline Formatting ContextIFC -而inline level box都是在IFC中布局的哪些具体的情况下会创建BFC 根元素HTML 浮动元素元素的 float 不是 none 绝对定位元素元素的 position 为 absolute 或 fixed 行内块元素元素的 display 为 inline-block 表格单元格元素的 display 为 table-cellHTML表格单元格默认为该值表格标题元素的 display 为 table-captionHTML表格标题默认为该值 匿名表格单元格元素元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group分别是HTML table、 row、tbody、thead、tfoot 的默认属性或 inline-table overflow 计算值(Computed)不为 visible 的块元素 弹性元素display 为 flex 或 inline-flex 元素的直接子元素 网格元素display 为 grid 或 inline-grid 元素的直接子元素 display 值为 flow-root 的元素BFC的作用在BFC中box会在垂直方向上一个挨着一个的排布 垂直方向的间距由margin属性决定 在同一个BFC中相邻两个box之间的垂直方向的margin会折叠collapse在BFC中每个元素的左边缘是紧挨着包含块的左边缘的style
.box1{height: 100px;width: 100px;margin: 20px;background-color: #73b1ce;
}
.box2{height: 100px;width: 100px;margin: 10px;background-color: #a473ce;
}
/style
div classbox1/div
div classbox2/divbox1和box2垂直方向上的margin会合并最终的margin值会取两个margin中的较大值。在此例中box1和box2垂直方向之间的距离为20px。BFC的特性可以解决什么问题呢 解决margin的折叠问题 解决浮动高度塌陷问题BFC的作用一解决折叠问题那么如果我们让两个box是不同的BFC呢那么就可以解决折叠问题。.box1 {height: 200px;width: 400px;background-color: orange;margin-bottom: 30px;
}.box2 {height: 150px;background-color: purple;margin-top: 50px;
}div classcontainerdiv classbox1/div
/div
div classbox2/divbox1属于HTML的BFC,box2属于container的BFC不属于同一个BFCmargin不会折叠BFC的作用二解决浮动高度塌陷◼ 事实上BFC解决高度塌陷需要满足两个条件 浮动元素的父元素触发BFC形成独立的块级格式化上下文Block Formatting Context浮动元素的父元素的高度是auto的◼ BFC的高度是auto的情况下是如下方法计算高度的 1.如果只有inline-level是行高的顶部和底部的距离 2.如果有block-level是由最顶层的块上边缘(margin-top)和最底层块盒子的下边缘(margin-bottom)之间的距离 3.如果有绝对定位元素将被忽略不计算高度 4.如果有浮动元素那么会增加高度以包括这些浮动元素的下边缘因此将浮动元素的父元素触发BFC其会增加高度以包括浮动元素的底部达到解决父元素高度塌陷的问题。但是这种方式不能解决绝对定位元素的父元素塌陷问题。
