maigin塌陷、margin合并两大问题分析及解决方法
编程之前要先初始化。
*｛
margin:0;
padding:0;
｝
两栏布局：步骤：1.先让两元素分布在一行（下面的元素上去）
2.再让左边的（或右边的）元素给右边的（左边的）元素让出右边的元素的距离。
代码示例：
效果：
注意：要先写right，再写left。
因为right先出生，然后left再出生，这样粉色在第一行，而黑色在第二行，当设置粉色为绝对定位时，黑色就可以串上去；
而如果使黑色先出生，粉色后出生，此时粉色在第二行，接下来设置粉色为绝对定位，也只对黑色起作用，而黑色在初始化位置，所以不作任何改变。
代码如下：
效果：
---------------------------------------------分割线-------------------------------------------------------
两大问题分析及解决办法：
maigin塌陷：
理解：我们给子元素设置距离顶层的距离为100px，它却不动，就像顶层不存在（塌陷）了一样。
过程：父子嵌套的元素垂直方向的margin，父子会基本粘合在一起，取他俩的最大值。
解决办法：
bfc
block format context
如何触发一个盒子的bfc:
1.position:absolute设置定位后盒子自然就变成bfc元素了
2.display:inline-block
3.float:left/right向左向右浮动
4.overflow:hidden溢出盒子部分隐藏
--1.--2.--3.
直接写到父级元素里面面就可以解决塌陷问题
--4.改变大盒子的渲染规则（bfc），塌陷问题就可以解决。
以上问题都能触发bfc，那我们用哪个？
解决塌陷问题时都会带来新的问题：
--1.如果只想让元素好好地固定在原有位置，使用绝对定位，下面的元素会窜上来。
--2.有时候展示形式想呈现独占一行的样式，可是现在设置成inline-bolck也是不行的。
--3.需要清除浮动
--4.如果现在想保持原有样式，但此时外面的部分会被隐藏。
所以当我们使用这些解决办法时，要视我们的需求而定。
margin合并问题：
demo1和demo2是兄弟结构，兄弟结构垂直方向的margin是重合的。
图示中，红绿本应该间隔200px,可是现在因为合并，间隔为100px。
解决办法：
bfc
但是为了解决此问题就加一个无用的结构是不可行的（margin塌陷问题中没有加HTML来解决，是直接在右边的文件里写的），所以这个问题我们不解决，直接通过计算的方法来弥补。
浮动模型：
使元素站队
可以直接在上面加边距：
也可以去掉边距：
特点：
1.浮动元素产生了浮动流
所有产生浮动流的元素，块级元素看不到他们；
产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到（在外面，不覆盖）浮动元素。
产生问题：边框包不住浮动元素：下边框消失了，父级元素不能包住子集元素
产生原因：因为里面的浮动元素产生了浮动流，浮动流对块级元素有影响，使块级元素看不到了。
解决办法：
方法1：
在元素的最后一行，加一个p元素，给它的class加一个clear，目的是消除浮动，就能使下边框出现。
clear只作用于块级元素，如果不是块级元素，则要加display：block使其显示方式变成块级元素。
当使用position：absolute、float：left/right时，从内部把元素转换成inline-block。
如图：
方法2：
给后面的伪元素加clear
也可以实现：
一个标签从他诞生的时候，它的前标签的后面、后标签的前面就会随之产生两个伪元素。
伪元素：它的元素结构是存在的，但它不在html里面。
选出伪元素：span：：before选出标签前面的伪元素
span：：after选出标签后面的伪元素
当在伪元素里添加背景之类的属性时，要加display：inline-block。因为伪元素是一个行级属性，所以当给它设置宽高时，就要加display：inline-block。
伪元素就像一个正常的元素，可以加所有属性，包括定位等等。
关于伪元素：
一个标签从他诞生的时候，它的前标签的后面、后标签的前面就会随之产生两个伪元素。
伪元素：它的元素结构是存在的，但它不在html里面。
选出伪元素：span：：before选出标签前面的伪元素
span：：after选出标签后面的伪元素
当在伪元素里添加背景之类的属性时，要加display：inline-block。因为伪元素是一个行级属性，所以当给它设置宽高时，就要加display：inline-block。
伪元素就像一个正常的元素，可以加所有属性，包括定位等等。