*学习笔记
1. 上下排列结构
上下排列结构可以使用clear属性清除浮动来解决容器叠加问题。属性值有left、right、both
如：<style>
#box1{width: 100px; height: 100px;background:brown;float: left; }
#box2{width: 200px;height: 200px;background:seagreen;cursor: pointer; clear: left;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
这样两个div就不会重叠了，但box1还是脱离了文档流，相当于在二楼而box2在一楼。
2.嵌套排列结构
①固定宽高：不推荐，不能把高度固定死，不适和做自适应的效果。
②父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
③overflow:hidden：(BFC规范)如果有子元素想溢出，那么会受到影响。
④display:inline-block：(BFC规范)不推荐，父容器会影响到后面的元素。
⑤设置空标签：不推荐，会多添加一个标签。
<style>
#box1{width: 200px;border: 1px solid red;}
#box2{width: 100px; height: 200px; background:seagreen;float: left;}
.clear{clear: both; }
</style>
<div id="box1">
<div id="box2"></div>
<div class="clear"></div><!--这是一个空标签-->
</div>
⑥after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）
<style>
#box1{ width: 200px; border: 1px solid red; }
#box2{ width: 100px; height: 200px; background:seagreen;float: left; }
.clear:after{ content: '';clear: both;display: block; }
</style>
<div id="box1" class="clear">
<div id="box2"></div>
</div>
