CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并
1. 盒模型
注意：padding和content区的颜色一样；border有自己的颜色；
问：如果border是虚线，那么虚线之间的颜色是什么呢？
答：跟content、padding颜色一样
有趣的理解：盒模型三个区的颜色：content区是帝都，相邻的padding受content控制，颜色与content一致，而border太远，border管的地方由border自己决定（哪怕不设置，默认都透明色|白色），border不管的地方（border-style：dashed、dotted），还是归content管的
2. position定位
（1）absolute：脱离原来位置，有层级，高，产生bfc；相对于有定位的父级进行定位，没有定位的父级，相对于文档定位。
（2）relative：保留原来位置，有层级，但不高。产生bfc；相对于自己原来的位置（在一个块内的位置，如果父级、祖父级移动，它也会跟着移动）
有趣的理解：position：relative；灵魂出窍，肉身还在。其他元素都可以看见肉身，都以肉身为准。
relative作为参照物，absolute作为定位。
（3）fixed：相对于屏幕定位，不管页面怎么移动，fixed的元素，相对于屏幕的位置是不变的。
问1：当父级只有position，没有left、right，算不算有定位？
答1：已经是定位元素，但是位置并不改变，因为，没有left和top，没有指定该元素定位到哪，所以默认原来位置
问2：因为absolute是相对父级定位的，而relative是相对自己原来位置定位的，那么absolute是相对父级盒模型的哪个区域定位的呢？
答2：有absolute定位的子级，子级盒模型优先与父级的padding定位（padding > content）。
问3：无定位的子级，在父级哪个区域呢？
问3：无absolute定位的子级，子级盒模型都在父级的content区域（不管父级是否定位）。
由问题3可以推倒，position：relative；原来的位置就是无定位的时候的位置。
3. bfc：block format content块级元素格式上下文，改变了块级结构的内部块的排列方式，比如：给父级设置float：left，那么子级就会在父级内从左到右的排列。
块级元素的哪些属性可以触发bfc？
float 除了none（left、right）
overflow 除了visible（hidden，auto，scroll ）
display (inline-block, flex, inline-flex，table-cell，table-caption)
position值为（absolute，fixed）
4. margin的两个问题
（1）margin塌陷：父子级的块级元素，垂直方向的margin，父子共用父子中margin值最大的那个，比如：父级的margin-top：100px；子级的margin-top：50px；那么父级和子级margin-top都是100px；
解决办法：父级触发bfc，父级是父级的margin-top，子级是子级的margin-top；
实例中：父级相对于文档，margin-top：100px；子级相对于父级，margin-top：50px；
（2）margin合并：兄弟结构的块级元素，垂直方向上的margin取最大那个margin值。比如：上一个块级的margin-bottom：100px；下一个块级元素的margin-top：50px；那么两个块级元素的垂直margin距离是100px。
解决办法：给其中一个加一个触发bfc的父级，当然，你要是给另一个也加一个触发bfc的父级也可以。
实例：上一个块级元素的margin-bottom：100px；下一个块级元素的margin-top：30px；
实例效果：
注意：在解决margin合并的时候，加了一个触发bfc的父级HTML标签，这是在HTML结构上添加标签，修改结构，不好。所以，margin合并，不要去解决，就使用margin的这种特性。
5. float
（1）特性：给父级设置float，那么子级就会在父级内依次排列，每一行不可溢出父级的宽度，换行排列。
（2）特性：子级元素之间没有文本间隙8px。
（3）特性：display：inline-block。
（4）产生浮动流：普通的块级元素看不见产生浮动流的元素，所以会与浮动元素处在同一位置（重叠）的下面
（5）清除浮动流：
实例代码：由于wrapper里面的子级是float，产生了浮动流，这时，父级wrapper看不到自己的子级，高度不能被撑开，所以要在子级的后面借用一个p标签，清除左右两侧的浮动流。
<style>
.wrapper {
border: 1px solid black;
}
.wrapper div {
float: left;
width: 50px;
height: 50px;
background-color: green;
column-rule-color: red;
}
p {
clear: both;
}
</style>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<p></p>
</div>
</body>效果：注意此处的p标签失去了段落效果。
注意：坚决不能采用添加标签的形式解决问题，清除浮动流的最好方法：用微元素清除浮动流
像上图那种效果，父级包裹有浮动流的子级，也可以将父级触发bfc，这样就可以包裹子级了
（1）加position：absolute
效果：
（2）加overflow：hidden
效果：
最后还是想说一点：div的display被改为inline-block后，宽、高都由内容决定。
position：absolute；float：left、right；他们的display：inline-block