DIV+CSS关于浮动跑到上面的原因

今天,遇到了一个问题就是div地底部莫名其妙的跑到上面去了。





无标题文档




	

TOP

LEFT

LEFT

LEFT

LEFT

LEFT

CENTER

CENTER

CENTER

CENTER

CENTER

Clear Float DIV


BOTTOM


上面的代码就是无论你怎么清除浮动他bottom都是会跑到center下面去

如图所示:

DIV+CSS关于浮动跑到上面的原因_第1张图片

因为left、center、right这几个div现在都是浮动的状态,浮动表示你现在的中间这个大的div不占位置的所以,最底部的bottom就会往上挤压。

这时候,很多人会想到清除浮动的方法。

当然,这些都是对那些有经验的来说可能最开始就写的很仔细。

但是往往我们在编写代码的时候会时不时在left或者是center这几个div里面给他添加了高度。

这时候,我告诉你完了。

导致你无论怎么去清除浮动都是没用的。

问题原因:

关键:检查你浮动的那几个div是否你给添加了height这个属性高度。

DIV+CSS关于浮动跑到上面的原因_第2张图片

只要修改下就OK了!





无标题文档




	

TOP

LEFT

LEFT

LEFT

LEFT

LEFT

CENTER

CENTER

CENTER

CENTER

CENTER

Clear Float DIV


BOTTOM


这样就可了

DIV+CSS关于浮动跑到上面的原因_第3张图片

问题搞定!

很多时候都是细节问题。希望这个可以帮到和一样遇到过这种问题的朋友。


你可能感兴趣的:(web前端开发)