CSS清除浮动及方法

浮动：float 属性定义元素向左/右方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。可以使元素inline-block化，具有包裹性，使得元素兼并了块元素和内联元素的的优点。在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

如下：

效果：

父div的border没有被子元素撑开，就是上述原因，

解决方法一：

经典的解决方法，就是在浮动元素下方添加一个非浮动元素：

原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

或者，解决方法二：浮动的父容器
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。

但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。也会影响子元素的定位。

解决方法三：浮动元素的自动clearing

让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。只要为父容器加上一条"overflow: hidden"的CSS语句就行了。关于为何父容器可以自动识别：由于加上overflow:hidden之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。

缺点：一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

解决方法四：CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。

"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

所以最好是写作：

详解浮动元素的特征：

http://blog.csdn.net/sinat_28050007/article/details/48250715

http://www.cnblogs.com/moveofgod/archive/2012/11/15/2771790.html

不单是用于清除浮动， :before 和 :after 的主要作用是在元素内容前后加上指定内容，还有一些其他用途，绘制三角形、对话框等参见：

https://www.cnblogs.com/lynnmn/p/6254367.html

绘制三角形

使用border-left/right/top/bottom

哈哈哈，好久没写博客了太懒了，最近来实习遇到很多问题，准备陆续全补在博客里面，这是之前匆忙记在word里面的，所以都是截图啦，有需要的同学自己敲一遍增加记忆噢！