CSS浮动与定位
记录下关于CSS浮动与定位这一下午的总结，
float: 初始值none,不浮动，其他值都被视为浮动元素；浮动元素会脱离文档流，
上代码看下浮动元素对文档布局的影响吧：
CSS
.div1{background:aquamarine;border:2px solid red;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
HTML
<body>
<div class="div1">
<div class="left">第一个子元素</div>
<!--<div class="right">第二个子元素</div>-->
</div>
<div class="div2"> div2 </div>
</body>
效果图如下：
首先说一下，比较常见的高度塌陷问题，div1容器里只有一个left子元素儿子，因为此时这个元素飘了（浮动），脱离文档流；所以这个儿子不听话，div1这个爸爸已经管不住了，所以，高度塌陷导致背景色什么的显示不出来；（原理：父容器没有设置显示高度，只能有子元素进行撑开，子元素浮动，脱离文档流，父元素高度塌陷，高度为0看不到背景色。）
？那么有没有办法让父元素有高度呢，让浮动的元素也能撑起父元素高度呢？当然是有的。父元素设置overflow:hidden，这样能够使得父元素div1的背景色显示，即浮动的子元素撑起了父元素的高度；
接着上代码：
CSS
<style type="text/css">
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
</style>
HTML代码和上一段保持一样不变化，此时效果图如下：
此时父元素出现了背景色，由于子元素left没有设置高度，因此子元素的高度是有文本高度决定的。所以能看到背景色的高度和left的高度一致；
？为什么overflow:hidden；能撑起父元素高度呢？答案是，因为父元素添加这个属性，触发BFC块级化上下文，使得浮动的子元素被包裹在这样的一个快级化上下文中，而无法溢出，因此父元素也有此块级化上下文撑起高度；
清除浮动的所产生的效果。了解下。基于上面的部分，我们在父元素div1里再加上一个子元素right，让第一个元素浮动，第二个元素不浮动，
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;clear: both;}
.left{float:left;width:20%;background:#DDD;}
.right{width:30%;background:red;height: 20px;}
<div class="div1">
<div class="left">第一个子元素</div>
<div class="right">第二个子元素</div>
</div>
<div class="div2"> div2 </div>
这个红色的第二个子元素，宽度有一部分被第一个子元素掩盖了，所以看不到，感兴趣可以给第一个子元素设置下外边距，能看到红色背景。
关键来了，清除浮动，我不想让第二个元素挤到第一个元素后面去了， 不想被第一个浮动元素盖住我一部分，我希望第二个子元素也能够靠左和第一个子元素对齐。此时加上清除浮动代码变化：
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
.right{width:30%;background:red;height: 20px;clear: both;}
HTML代码和上一段一样，不变化。效果如下：
这就是清除浮动带来的效果，但是问题来了 ，我要是想让第一个子元素和第二个子元素之间有间隔，有外边距margin值，这会怎么样呢，依旧是上代码看效果；
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
.right{width:30%;background:red;height: 20px;margin-top:20px;clear: both;}
html代码和上述一样，不变化，
惊喜不？哈哈，和上面还是一样，这就是清除浮动带来的弊端，它会让margin值失效，原因呢：我能力有限，只能参考官方的解释了：
当clear应用于非浮动块时，它将元素的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致外边距折叠不起作用。摘自MDN’
那既然这样的话， 你是不是也想过，如果我让第二个元素也浮动的话，是不是就逃避上面那一条规则而让外边距产生了呢？好吧，上代码，
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
.right{float:left;width:30%;background:red;height: 20px;margin-top:20px;clear: both;}
HTML代码和上面一样，不重复。
看到没有，外边距出来了。
插入一个比较有意思的例子，此时我想给第一个子元素和第二个子元素中间隔开更大的间距，设置第一个子元素的下边距为20px；那么效果应该会是20+20=40px;，可以验证下，事实上确实达到这种效果；
但是如果第一个元素和第二个元素都不浮动，在正常的文档流中，第一个元素和第二个元素的间距将会出现边距折叠的情况，此时边距将只有20px;取各自边距的最大值，因为此时这两个元素在同一个BFC里，自然会发生边距折叠的情况，不同于两个浮动元素边距叠加，因为两个浮动元素分别属于各自的BFC，所以，互不影响；能出现叠加的情况。
不知你想过没有，这个时候我要是再给div1加一个子元素，让他左浮动，你说它应该贴着第一个还是贴着第二个呢，
上代码：
CSS
.div1{background:aquamarine;border:2px solid red;overflow: hidden;}
.div2{background:#800080;border:2px solid red;height:100px;margin-top:10px;}
.left{float:left;width:20%;background:#DDD;}
.right{float:left;width:30%;background:red;height: 20px;margin-top:20px;clear: both;}
.main{float:left;width:100px;height: 50px;background-color: yellow;}
HTML:
<div class="div1">
<div class="left">第一个子元素</div>
<div class="right">第二个子元素</div>
<div class="main">第三个子元素</div>
</div>
<div class="div2"> div2 </div>
效果图如下：
看着好像不知道到底贴着谁，事实上是贴着第二个子元素，因为第二个子元素设置了上外边距20px，而第三个子元素是以第二个子元素元素框为参照的。所以看着比第二个高一些；具体原理，参照官方文档
当clear应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。
这个第三个元素就是应用了上面规则的后一句话。确实是影响了，所以它无法与第一个对齐；
第一次这么认真的写博客，献给奔向程序员路上的自己。欢迎各位大佬来指正补充！！！！