直到写这篇随笔，才认真的去研究了一下每一种清除浮动的方法到底是什么原理(⊙﹏⊙)b
对于刚刚接触CSS的人来说，就像当时的我一样，在做一些小项目和练习的时候，总会莫名其妙的问自己“哎！？我的div去哪了！？( ⊙ o ⊙ )”然后默默地加上一个背景色来看一下我辛辛苦苦写的小块块去了哪里。
原来是因为没有清除浮动被上面的遮住了_(:зゝ∠)_
总是忘记清除浮动，是我最致命的问题，所以总结一下方法，顺便让自己的手和脑子，别再忘记清除这些讨厌的浮动/(ㄒoㄒ)/~~
当给我们的小div加上浮动，让他们整整齐齐的排列起来的时候，他的父级box没有被内容撑起来，因为我们知道浮动会脱离文档流，让浮动的元素进入浮动层。
当我们再写其他内容的时候就会被遮住，比如这块灰色的div~
那到底该怎么清除浮动呢......
方法一：给父级一个高度
这种方法是最简单的方法，也最好理解，他的原理就是给父级一个高度，让下面的元素知道，上面的三个元素，有父亲给他们撑起了一片天。
方法二：添加新的元素，运用clear：both
这种方法就是给他们添加一个兄弟元素，给他的兄弟元素一个clear:both属性，clear的属性就是属性规定的元素不允许出现浮动。
both表示两边都不允许出现浮动，clear的属性也可以为left(在左侧不允许浮动元素)和right(在右侧不允许浮动元素)，默认值为none(允许浮动元素出现在两侧)。
方法三：给父级overflow
给父级增加overflow属性，就可以清除浮动，overflow:hidden和overflow:auto
但是我一直搞不懂为什么overflow为什么可以清除浮动，因此特意去查了资料：
overflow:hidden的意思是超出的部分要裁切隐藏掉，那么如果浮动的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏，那么不计算其内浮动元素高度就裁切，就有可能会裁掉浮动的内容。
如果没有明确设定容器高情况下，它要计算内容全部高度才能确定在什么位置裁剪，浮动的高度就要被计算进去，顺带达成了清理浮动的目标。
以上为所查资料。
方法四：after方法
这种方法在现在很普遍和流行，以下内容均来自资料，仅用于个人记忆和参考。
原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。
以上就是清除浮动的四种方法，但不是每一种方法都能够很好地应用，比如第四种方法所提到的兼容性，只有第四种方法有很好的兼容性，所以我想在我学习更多的关于这方面的知识之后，在以后的学习和工作中，应该会更多地了解和应用第四种方法。
所以现在才知道，怪不得做项目的时候人家的网页里总有:after这个“莫名其妙”的东西。(⊙v⊙)
