首页 > 代码库 > 清除浮动的简要介绍
清除浮动的简要介绍
最近在总结一些以前了解的知识，对于css来说，清除浮动是一个知识点。
那我们来看看浮动是什么。当然我们要先提一提常规文档流（额，这篇文章主要参考《CSS权威指南》，但书中没解释常规文档流，那就我自己按理解来解释一下了）。
常规文档流：就是除去浮动元素（float）、绝对定位（position：absolute）后的所有元素，按照它们在html文档中出现的顺序及其自身的属性（块级元素，行内元素等）生成的排版。
浮动的特点：好吧，就是有了float属性的元素会脱离常规文档流，尽量的跑到父元素的顶部，据说CSS设计float属性的主要目的，是为了实现文本绕排图片的效果，然而，这个属性居然也成了创建多栏布局最简单的方式（@《CSS权威指南》）；并且，既然浮动元素脱离了文档流，其父元素也就看不到它了，因而也不会包围它，导致父元素盒模型不能被撑开，这样就会造成许多布局上的问题。
好了，既然已经了解了什么是浮动，那我们就来说一下三种清除浮动的方法：
1.子元素计算高度，为父元素设定高度，适合一些高度固定的地方（。。。这个方法还是不要用了，实在是不太实用）。
2.这个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它包围浮动元素（触发BFC，BFC这个概念先不说了）。
3.让父元素也浮动起来（同样也是触发BFC）。
4.给父元素的最后添加一个非浮动的子元素，然后清除该子元素，一般也有两种方式实现它：
a.在父元素标记中的最后添加一个子元素，并给它应用clear属性，e.g.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>float的清除</title><style>.floatDiv { float: left;}.clear { clear: both;}</style></head><body>
<div> <div class="floatDiv"> 我是浮动元素 <div> <div class="clear"> <div></body>
这样，浮动的元素被父元素包围住了，但会添加一个纯表现性元素，显得不太符合语义化的要求，当然，还有更好的b方法。
b.直接给父元素添加一个类，给它加上一点点修饰，e.g.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>float的清除</title><style>.floatDiv { float: left;}.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both;}</style></head><body> <div class="clearfix"> <div class="floatDiv"> 我是浮动元素 <div> <div></body>
像这样给父元素的最后加上一个伪元素：一个很小的句点，作为非浮动元素，同时设置其height，visibility属性确保它在页面上不可见，然后clear:both使得它可以清除左、右两边的浮动元素。
好了，关于浮动先说到这。