html中清除浮动问题

积累，小白也有大神梦

最近在制作自己的网站，涉及到了前端的一些问题，在这里记录一下，方便以后的温习。在前端的几种布局中，经常会运用到float浮动，这个问题。但是应用它也会出现一些问题，今天先记录一下，目前我遇到的一些问题。

一

第一个问题是我在运用浮动的时候遇到的等级问题。在运用float中，你先写的元素，总是在最下面，例如三个div：

<div id="left" style="float:left"></div>
<div id="center" style="float:left"></div>
<div id="right" style="float:left"></div>

在这个里面，其实left在最下面，center在中间，right在最上面。这个问题不总是会出现特殊的影响。但是这次我在为center设置左右阴影的时候，出现了问题。因为right在最上面，所以它把center的右阴影给覆盖了，导致右边阴影无法显示。
而解决方法是：修改三个div的优先级，最简单的方法就是把center放在最下面。又因为想让center浮动中间，所以可以把right的浮动修改为float：right。

其实我还想到了另种解决方法，不过在我的火狐浏览器中没有成功，我感觉这种方法是可行的，不知道为什么会失败，如果有人知道为什么失败，请在下面留言，不胜感激。这种方法是：
运用z-index修改优先级，把right的优先级设置的低一点，把center的优先级设置的高一点就可以了。

附加知识：在用box-shadow设置阴影的时候,如果只用一个div并不能实现只让左右具有阴影，而上下没有阴影。因为box-shadow这个属性设置阴影的方法是，在元素的下面，添加一个矩形的有色矩形，而设置阴影是让这个矩形的边缘地带变的模糊，给人的感觉是阴影。所以在设置阴影的时候，上下，左右分别至少会有一面具有阴影的效果。

二

问题二是在为子元素添加浮动的时候，如果子元素的高度大于父元素的高度，则父元素不会随着子元素而变大（前提：将父元素设置为auto）。这个原因是因为子元素浮动起来，则不占用文档流，所以不占用父元素的位置，而子元素变大父元素不会变大。
解决方案为：只要将子元素的浮动，相对于父元素来说取消掉即可，即父元素覆盖子元素的浮动设置为隐藏。方案有两种：
方案一：将父元素的overflow设置为Hidden

    <div style="overflow:hidden">
        ...
    </div>

方案二：在父元素的里面，在子元素的后面添加一个空的元素div，清除浮动。

    <div>
        ....
        <div style="clear:both"></div>
    </div>

这样就可以解决问题。