如何解决div+css浮动布局中的常见问题

　　重庆网页设计培训学校拥有一支具有丰富的工作经验及教学经验的双师型教师队伍，集合了数百位企业家沟通交流心得，结合自身的职场成长经典案例，研发出了适合学员成长的培训课程大纲，用实际丰富的案例紧紧围绕企业应用开展教学培训，小班教学，全程面授，让每一位学子学有所成。成才热线400-888-3854 QQ 2294155463

　　DIV+CSS网页布局常用到浮动方案，但浮动并不像表格那样好用，很多时候会出问题。同时设计不够良好的浮动布局，在不同的浏览器下会有不同的表现，可能设计时照着常用的浏览器做好了，拿到其它浏览器里一看又乱掉了。浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好些，IE7、IE8次之，IE6目前用户群较多，但也比较糟糕，经常莫名其妙地多出一些空隙等等。拿浮动布局来说，你算好的宽度在Firefox以及 IE7、IE8下可能是正常的，拿到IE6里就会发现不该换行的时候它却换行了。

　　然而，不管HTML页面设计人员怎么骂微软，网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。

　　1、如果是两栏并列，要在中间显示分界线或图片，可以使用repeat-y的背景图片来实现，此样式写在这两栏的父级元素中，可以增加分界线与高的栏等高。

　　假设vline.gif是宽100px高1px，左边99像素为白色，右边1像素是黑色，则此背景图片实现的效果就是在两列间拉出一条黑色竖线。

　　不过要说明一下，这种方法如果父元素宽度设计200px，理论上是正确的，但实际上在IE6里会换行，因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些，但这样格式会不够。你可以用下面的margin法解决这个换行问题。

　　2、如果有一列想用自适应宽度，而不是固定宽度，可以巧用margin属性。比如左边固定100px，右边自适应，则可以让父元素“margin- left:100px”，列再“margin-left:-100px”，第二列就可以用“width:”来实现自适应宽度了。如果不这样巧用margin，第二列没法设百分比，因为浏览器客户区宽度*+100px是超出浏览器客户区总宽度的，浏览器会出现横向滚动条;又因为浏览器客户区总宽度不确定(确定的话就不用什么自适应了)，你也没法用类似80%这样的百分比使其正好撇下100px给列。

　　另外你可能想让这两列的父级有一个小宽度以避免两列换行，这个可以用min-width属性来实现。

　　3、自适应高度的该如何设计呢?很多人为这个问题头痛过，抱怨height:不管用。其实，让它管用很简单，只是别忘了给html也加上 height:的属性。没错，就是html，你可以写成这样：html,body{height:}。但这样还有个问题，没解决。如果你想让一行字始中处于下面，该怎么做呢?答案还是margin。

　　你可以把主体部分放在一个DIV中，将其小高度设为，然后在后面放页脚的DIV，假如它的高度为40px，则“margin- top:-40px”，这样可能会使主体部分下边的内容被遮住，解决办法是在主体部分下面的元素上加“padding-bottom:40px”属性即可。理论上讲加“margin-bottom:40px”也可以，但观查发现在IE里会出现垂直滚动条。

　　页脚始终在底部

　　注意别忘了样式表中要加：html,body{height:;} 这三招应用技巧，基本能解决DIV+CSS浮动布局的常见问题，且能较好的兼容不同的浏览器。

　　重庆网页设计培训学校拥有一支具有丰富的工作经验及教学经验的双师型教师队伍，集合了数百位企业家沟通交流心得，结合自身的职场成长经典案例，研发出了适合学员成长的培训课程大纲，用实际丰富的案例紧紧围绕企业应用开展教学培训，小班教学，全程面授，让每一位学子学有所成。成才热线400-888-3854 QQ 2294155463