BFC
BFC特点
1. 内部的盒子会在垂直方向，一个个地放置；
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4. BFC的区域不会与float重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6. 计算BFC的高度时，浮动元素也参与计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.main {
background-color: pink;
/* float: left; */
/* float: left; */
/* overflow: hidden; */
/* position: absolute; */
display: inline-block;
}
.box1 {
width: 200px;
height: 200px;
background-color: green;
/* margin-bottom: 100px; */
/* float: left; */
}
.box2 {
width: 100px;
height: 100px;
background-color: purple;
/* margin-top: 50px; */
float: left;
}
.box3 {
width: 300px;
height: 100px;
background-color: orange;
float: left
}
</style>
<!--
BFC特点
内部的盒子会在垂直方向，一个个地放置；
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
计算BFC的高度时，浮动元素也参与计算。
-->
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
<hr>
<style>
.list {
background-color: pink;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
overflow: hidden;
}
.item {
width: 100px;
height: 100px;
margin-right: 50px;
background-color: green;
float: left;
}
.outer {
width: 400px;
height: 100px;
background-color: orange;
}
</style>
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="outer"></div>
</body>
</html>
IFC
IFC特点
1.IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
2.IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。当float元素会位于IFC与line box之间的时候，会使得line box宽度缩短。
3. 同一个IFC下的多个line box高度会不同。
4.IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
IFC特点
IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。当float元素会位于IFC与与line box之间的时候，会使得line box宽度缩短。
同一个IFC下的多个line box高度会不同。
IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
-->
<style>
.box {
background-color: pink;
display: inline-block;
}
.box span {
background-color: green;
margin: 0 10px;
vertical-align: middle;
}
.item1 {
font-size: 20px;
}
.item2 {
font-size: 50px;
/* float: left; */
}
.item3 {
font-size: 40px;
}
.item4 {
font-size: 30px;
/* display: block; */
}
.item5 {
font-size: 20px;
}
</style>
<div class="box">
<span class="item1">span1</span>
<span class="item2">span2</span>
<span class="item3">span3</span>
<span class="item4">span4</span>
<span class="item5">span5</span>
</div>
<hr>
<style>
.demo {
width: 1000px;
height: 400px;
margin: 0 auto;
background-color: pink;
/* vertical-align: middle; */
text-align: center;
}
.demo span {
vertical-align: middle;
}
.test1 {
background-color: green;
font-size: 50px;
}
.test2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: purple;
}
.test3 {
display: inline-block;
background-color: brown;
}
.demo::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 20px;
background-color: orange;
}
</style>
<!-- 利用IFC居中 -->
<div class="demo">
<span class="test1">test1</span>
<span class="test2">test2</span>
<span class="test3">test3</span>
</div>
</body>
</html>
