FC(Fomatting Context):是页面中的一块渲染区域,有其渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用。
一)BFC规范(block)块级格式化上下文85
形成BFC条件:浮动元素(float除none以外的值)
定位元素(position的absolute / fixed)
display (值为inline-block / table-cell / table-caption)
overflow (值为hidden / auto / scroll)
BFC特性(规则):内部的盒子会在垂直方向一个接一个放置
垂直方向的距离由margin决定
BFC的区域不会与float区域重叠
计算BFC的高度时,浮动元素也参与计算
BFC就是页面上独立的容器,容器里面的子元素不会影响外面的元素
BFC作用:解决margin重叠的问题(添加独立BFC)特性5
解决浮动高度塌陷的问题(在父级添加overflow:hidden;)特性4
解决侵占浮动元素的问题(添加overflow:hidden;)特性4
//内部盒子会在垂直方向上一个接一个的放置 .box1,.box2{ width: 200px; height: 300px; border: 1px solid red; } //垂直方向的距离由margin的最大值决定 .container{ overflow: hidden; width: 100px; height: 100px; background-color: yellow; } .box1{ height: 20px; margin: 10px 0; } .box2{ height: 20px; //叠加后,选最大的20px margin: 20px 0; } //③BFC独立的容器,容器里面的元素不会受到外面元素的影响 .wrapper{ overflow: hidden; //margin10+margin20=30px } <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> ③ <div class="container"> <div class="wrapper"> <div class="box1"></div> //把box1单独带出去 </div> <div class="box2"></div> </div>
二)IFC规范(inline)行级格式化上下文86
形成IFC条件:font-size line-height height vertical-align(元素垂直对齐方式)
IFC特性(规则):IFC元素会在一行上从左至右排列
在一行上的所有元素会在该区域形成一个行框
行宽的高度为含框的高度,高度为行框中最高元素的高度
浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度
行框的宽度容纳不下子元素时,子元素会换下一行显示,会产生新行框
行框的元素内遵循text-align和vertical-align
容器高度height=line-height+vertical-align
span{ font-size:30px; background-color: #345; width: 200px; //行级标签不识别宽高 display: inline-block; //让行级标签识别宽高,用display设成块级标签 //display: block; } strong{ font-size:16px; background-color: #888; } .box{ float: left; font-size:50px; } <span>span</span> <strong>strong</strong> <em class="box">box</em>