解决浮动问题，轻松清除浮动

一个元素浮动之后就被移出了文档流，不再占据宽高。如此一来，它的位置就可能在父元素之外，父元素的高度也可能会变成0。

动手写13.1.4 浮动元素的父元素高度

“动手写13.1.4”中类为demo-float的元素宽度为200px，高度为100px，自身浮动且具有一个wrapper类父元素。父元素的实际宽度为100%，高度为0，如图13.1.6所示，该元素将会溢出父元素的空间。

图13.1.6　浮动元素与父元素关系图

我们往往不希望浮动元素的这种溢出展示在实际项目中，因为它会令网页看起来很奇怪，所以我们要想办法去掉这种溢出的效果，也就是俗称的“清除浮动”。清除浮动有很多种方法，下面将介绍两种常见方法：使用overflow属性和clear属性。

动手写13.1.5 父元素使用overflow属性

“动手写13.1.5”和“动手写13.1.4”的区别是为父元素添加了overflow属性且取值为hidden，这使父元素把浮动的子元素纳入自己的领地之内。此处overflow属性的取值也可以是auto，但不能是visible，不然就和原来一样溢出显示了。取值为scroll其实也能清除浮动，但是始终会显示一个滚动条，所以通常不使用。本例的效果如图13.1.7所示：

图13.1.7　浮动元素展示在父元素中(www.xing528.com)

第二种方法是使用clear属性，这个属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动到它的下面（清除浮动）。这个属性的取值为一系列关键字，如表13.1.2所示：

表13.1.2　clear属性的值

动手写13.1.6 最后面增加一个带有clear属性的空兄弟元素来清除浮动

“动手写13.1.6”定义了一个clearfix类的空元素，这个元素的clear属性设置为both，它的左右两侧不允许出现浮动元素，相当于让浮动元素单独占行，因此可以使其被父元素包裹。这个方案有一个不太好的地方就是它让HTML文档中出现了许多空的元素，此时我们可以巧妙运用前面学到的::after伪元素进行优化。

动手写13.1.7 伪元素实现清除浮动

“动手写13.1.7”在“动手写13.1.4”的基础上为父元素wrapper类增加了一个::after伪元素，这个伪元素的内容content属性设置为空字符串，clear属性设置为both，display属性设置为block，这样就可以不添加新的HTML元素而实现清除浮动了。

提示

如果元素的父元素也是浮动元素，那么它的父元素将会包裹自己，这种方法虽然能清除当前元素浮动，但是会将清除浮动的难题推给父元素。