两个经典bug
margin塌陷
垂直方向的margin父子元素是结合到一起的，取最大值
两个div,父级div移动带着子级div移动这是正常的，正常来说子级div移动是相对父级进行移动，设置左右方向是正常的，但是设置子级的垂直方向移动有个bug，比如设置margin-top参数是有bug的
解决方法一：给父级border-top加一个参数，等于给父级加个顶棚（不专业，不推荐）
解决方法二：改变父级渲染规则，使父级变成bfc；
bfc(block format context)，默认来说每个盒子都有默认的语法规则，触发bfc后，会使用另一套语法规则；
如何触发bfc?
1、设置position:absolute; 设置成绝对定位
2、设置display:inline-block; 行级块元素
3、设置float:left | right; 向左、向右浮动
4、设置overflow:hidden; 溢出部分隐藏
不要因为去修正bug，随便去修改html结构
float
float就两个值，一个left,一个right;
浮动元素产生了浮动流；
所有产生了浮动流的元素，块级元素看不到他们
产生bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
如果想父级包住浮动元素，可以用一个<p>占位，设置参数clear:both;清除浮动流
<!-- 包裹浮动元素演示 -->
<div clsss="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p class="clear"><p>
</div>/* 包裹浮动元素演示 */
.wrapper{
border:1px solid black;
}
/* 因为.content是浮动元素，div是块级元素所以div是包不住 */
.content {
float:left;
width:100px;
height:100px;
background:black;
color:#fff;
}
/* 这里我们需求是让父级div可以包住.content元素 */
.clear {
clear:both;
}
/* 设置一个<p>标签，css设置clear参数为both */
/* clear是清除它周边浮动流 */虽然上面的方法可以解决包裹浮动元素的问题，但是新增的一个.clear是没有意义的，破坏页面结构，所以最好不用，我们可以用伪元素来解决。
设置浮动元素后最好都清除一下浮动流，避免对后面的元素产生影响。
伪元素
伪元素天生就存在是行级元素，只是不在html中显示，可以用css选中
/* 伪元素以::开头，要用content连接，这里的content只能用在伪元素里 */
span::before {
content:"测试";
}这里我们就可以解决上面的问题了
/* 在.wrapper伪元素清楚浮动流 */
.wrapper::after {
content:"";
clear:both;
/* 这时还不行，因为伪元素是行级元素，我们需要把它改成块级元素 */
dispaly:block;
}
凡是设置了position:absolute; float:left | right; 系统会把元素转换成inline-block;
Andrew's Web