网站开发之巧用clear:both

前言  

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

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

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

     在开发中，从美工MM给你Html代码中，肯定能经常看 <div style="clear:both;"></div>这样的代码，但是你真的能明白它是做什么用的吗？

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">
TEST DIV
</div>
<div style="clear:both;"></div>
</div>

     你可以将此部分代码放到一个HTML页面看看效果，然后在去掉<div style="clear:both;"></div>看一下效果,就知道这句话的作用了。

     如图：

    （1）有clear:both的：

    （2）无clear:both的

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

      在做Web开发时，对别人的应用(jsp+servlet)进行服务器部署时出现了页面跳转无效的情况。但是项目在本地未出现此状况。

     在本地运行结果如下：

     服务端运行结果如下：

     通过对比可以发现，在服务端运行时导航栏中显示的是绝对地址，而在本地运行时显示的是jsp内容的标题。

     经过输出测试，发现其参数均可以正确传递，但是页面内容无法获取到。本地调试一切正常，唯独在服务端时状况频出。

     在服务端输出内容如上。其basePath明显有问题,不应再有端口号，而且端口号是错误的。在本地测试输出basePath如下:

      我也是无语了，抱着试试看的态度，居然发现使用UC 浏览器居然可以正常显示，这到底是什么鬼啊。

      经测试，在IE上也不正确显示。但是其网页源码可查看到，而在Chrome中则无法查看。

结果

      正常显示：UC、火狐

      不显示：Chrome、IE

      经过最终测试发现，是网页编码出现了问题。

​