一、FC（Formatting Context）
他是页面中的一块渲染区域，并且有一套渲染规则，他决定了他的子元素将如何定位，以及和其他元素的关系和相互作用。
二、定位机制
1.普通流（normal flow）：
在普通流中，元素按照其在HTML中的先后位置之上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行；块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流。
2.浮动（float）:
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向，尽可能的向左边或右边偏移，其效果和印刷排版中的文本环绕相似。
3.绝对定位（absolute position）：
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位不会对其他兄弟元素造成影响，而元素具体的位置有绝对定位的坐标决定。
三、BFC（Block Formatting Context）块级格式化上下文
1.具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
2.BFC的布局规则（body就是一个BFC容器）
（1）内部的box会在垂直方向上，一个接一个地放置。
（2）box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
（3）每个元素的margin box的左边与包含块border box 的左边相接触。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面中的一个隔离的独立容器，容器中的子元素不会影响到外面的元素。
（6）计算BFC的高度时，浮动元素也参与计算。
3.能触发BFC的元素
（1）根元素（body）
（2）浮动元素（float属性不为none）
（3）定位元素（position为absolute或fixed）
（4）行内元素（display为inline-block，table-cell，table-caption，flex，inline-flex）
（5）overflow不为visible。
4.BFC是独立的要渲染区域这个区域与外部毫不相干，需要在包住的div里触发，要触发哪一个就在哪一个地方写上overflow：hidden；
5.BFC的用处
（1）清除浮动
<style type="text/css">
.wrap{
width: 300px;
border: 1px #000 solid;
}
.float{
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="float">我在浮动</div>
</div>
</body>
未清除浮动.PNG
- 解决方法：在包含容器上添加overflow: hidden;，清除浮动
.wrap{
width: 300px;
border: 1px #000 solid;
overflow: hidden;
}
清除浮动.PNG
（2）自适应：两栏布局
<style type="text/css">
.wrap{
width: 200px;
}
.left{
width: 100px;
height: 50px;
float: left;
background-color: pink;
}
.main{
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">我是left</div>
<div class="main">我是main我是main我是main我是main我是main我是main我是main我是main我是main我是main</div>
</div>
</body>
文字环绕.PNG
- 解决方法：在class为main的div上添加overflow: hidden;
.main{
background-color: yellow;
overflow: hidden;
}
二栏式布局.PNG
（3）防止垂直margin合并
<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 100px;
}
.div2{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
margin重叠.png
- 解决方法：在其中一个外部套一个div，并添加overflow：hidden；
<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 100px;
}
.div2{
margin-top: 100px;
}
.wrap{
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="wrap">
<div class="div2"></div>
</div>
</body>
margin不重叠.PNG
四、IFC（Inline Formatting Contexts）:行内格式化上下文
1.行内框（inline box）
每个行内元素会形成一个行内框，行内框是浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素（padding等）影响的时候，行内框等于内容区域，设定行高是行内框高度不变，半行距分别添加/减少到行框的上下两边。行内框就是行内元素的边框。
2.行框（line box）
行框是指文本行的一个虚拟的矩形框，是是浏览器渲染模型中的一个概念，无法显示出来，行框高度等于本行内所有元素中行内框最大的值，当有多行内容时，每行都会有自己的行框。
3.IFC的布局规则
（1）行内元素从容器的顶端开始，一个接一个地水平排布。
（2）水平的padding，margin，border对行内元素有效，但垂直的padding，margin，border对行内元素无效，不影响其高度。
<style type="text/css">
div{
width: 500px;
height: 200px;
border: red 10px solid;
}
span{
padding: 50px;
margin: 50px;
border: 5px #000 solid;
}
</style>
</head>
<body>
<div>
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
<span>5555</span>
</div>
</body>
水平和垂直margin，padding，border.PNG
（3）一个水平行中的行内框组成了行框。
（4）行框的高度始终容下所有的行内框，并只与行高有关，行内框小于行框时，行内框垂直位置由vertical属性决定。
<style>
div{
width: 600px;
height: 200px;
border: red 2px solid;
}
span:nth-of-type(1){
font-size: 50px;
border: 1px solid #000;
}
span:nth-of-type(2){
font-size: 14px;
vertical-align: top;
}
span:nth-of-type(3){
font-size: 15px;
line-height: 200px;
vertical-align: middle;
}
span:nth-of-type(4){
font-size: 20px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<span>我是个大span</span>
<span>top对齐</span>
<span>middle对齐</span>
<span>bottom对齐</span>
</div>
</body>
对齐方式.PNG
（5）行框的宽度由包含块和浮动元素决定：当不存在浮动元素时，行框的宽度等于包含块的内容区域的宽度；否则，因为行内元素会环绕浮动元素布局的特性，行框的宽度会比包含块的内容区域的宽度小。
（6）当几个行内框在水平方向上无法放入一个行框时，行框将会被分割为几个行框，padding，margin，border在分割处没有视觉效果，如果行框无法分割（当单词过长或设定不换行），则会溢出。
<style type="text/css">
div{
width: 150px;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div><span>放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚aaaaaaaaaaaaaaaaaaaaaaaaa放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚放不下就滚</span></div>
</body>
溢出.PNG
4.创建一个IFC的环境
让行框的高度是包含块的高度的100%，让行内框内部元素使用vertical-align：middle 就OK了。
5.好处：
解决垂直居中vertical-align：middle 要配合line-height：某某px，使用的问题
网友评论