css浮动与清除浮动

html-css010

css浮动与清除浮动,第1张

css浮动（float：none | left | right）在网页布局中我们经常使用的属性，也是经常会出现Bug的地方。

首先我们要搞清楚为什么要用到float呢?

网页布局中块级元素，在页面中独占一行，自上而下排列，也就是传说中的文档流。

可是我们要实现左右模块该怎么实现，这就需要用到float了，当我把第三个设置左浮动

然后我们在测试第四个也设置左浮动

下面我将第二个和第四个右浮动

我们在测试将第三个浮动取消

可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决？

这个时候就需要我们清除浮动（clear：both | left | right）

上面的例子 希望第三个左浮动，第二个和第四个右浮动，第五个不受影响在最下面。

首先要知道两个模块的相对位置是什么样的 是上下的 还是左右的

如果是上下的关系 那么给上模块设置border-bottom:1px #000 solid或者给下模块设置border-top:1px #000 solid

如果是左右的关系 那么给左模块设置border-right:1px #000 solid或者给右模块设置border-left:1px #000 solid

不知楼主是否明白 不明白的话 就hi下我把 祝你好运！