div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnose

今天终于有空写篇文章了，如果有不对的还请大家多多指正，只是想让初学者少走点弯路，当初我学的时候到处碰壁，一些很简单的问题如题“div+css的浮动”被一些牛X人物写的多么的深奥，我理解半天才弄懂原来是围绕一个属性把那个标签的祖宗十八代都给牵扯出来了！不说了....

首先，你肯定为一名网页构架师或者将要成为一名构架师，说实话现在的这个行业我却不怎么看好，因为现在做这个的太多了，谁让它叫IT呢？做的多就贬值了!呵呵，发个牢骚，现在我们切入正题！

1.float的在IE6中出现的一些BUG问题

当使用float在网页中布局的时候会出现一些让我们难以理解甚至不敢置信的一些问题，例如：在IE6里面会出现右侧3PX的空白，这时其他浏览器都是非常标准，我们理所当然的认为是IE6比较落后现在没几个人会在意，但是作为一个设计师，你必须为你的作品负责，这个问题其实解决很简单，这里我们需要使用一些HACK技术，在你的css中加上一个如：.box{margin-right:0px; margin-right:-3px!important;}这样就ok了！如果不了解HACK技术的，可以在网上查，很多的哦！

2.float浮动混乱布局div+css的浮动

最常见的问题就是，当你把上面两个块使用了float浮动属性后，下面的块会出现在上面的右侧，这个问题在设计的时候很头疼，也是很多初学者最搞不懂的。现在这个其实也很简单，使用clear这个元素的清除属性，就是在以上的两个div下面写上一个容器如：

#bb{float:left;width:480px;}

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

......

......

.....

如此即可解决这个老大难的问题。

3.float浮动出现双间距

当li使用float属性后会出现两倍的间距即当你设置li的左边距为3PX但是它会出现6PX的左侧空白，这个其实只需要在li元素的css上面设置一个内联属性即：display:inline即可解决。

4.当未知高度的子元素进行float浮动时，让父元素自适应高度

可在父元素中的末端加上

.....

即可如：

#oo{ margin:0 auto;width:960px;}

#bb{float:left;width:480px;}

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

......

......

.....

，如果让子元素也自适应高度的话同上。

这是我现在就遇见的div+css的浮动常出现的问题与解决方法，如果有不对的地方，还请大家予以指正，欢迎大家一起探讨