网站开发进阶(四十二)巧用clear:both

网站开发进阶(四十二)巧用clear:both

前言

我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况，明明布局正确，但是整个画面却混乱起来了，有时候在IE6下看的很正常的，到ie7或者火狐下看时，就一片混乱了，无论怎么计算，就是不能将排版改正过来。其实，这一切都是浮动搞得鬼，也就是css中的float，要解决情况，就需要使用clear:both了。

CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

在开发中，从美工MM给你Html代码中，肯定能经常看

你可以将此部分代码放到一个HTML页面看看效果，然后在去掉

如图：

（1）有clear:both的：

（2）无clear:both的

这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

美文美图

云速建站 网站

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。