float属性可以使块元素位于页面同一行内，但也存在以下问题：
1. 是否每行中所有同级块元素都要加float属性；
2. 当float元素后面的块元素如何换行；
3. 当页面（父元素）宽度缩小得比同行所有块元素宽度（包括margin和padding）之和要小时，后面的块元素会自动换行
解决以上问题的方法为：
问题1：
同行中的块元素最好都加上float属性，若只是在第一个元素上使用float属性时会出现以下情况
图1 仅在第一个元素（红色）上加入float属性时会出现错误
参考代码：
#div1{width:200px; height:200px; background:#900; margin: 20px; float:left;} #div2{width:300px; height:200px; background:#090; margin: 20px;}
<body> <div id="div1" /> <div id="div2" /> </body>
若在div2上也加入float:left属性则可解决此问题。
问题2：
通过clear属性让后续的块元素换行。
图2 增加clear属性后的效果
参考代码：
#div1{width:200px; height:200px; background:#900; margin: 20px; float:left;} #div2{width:300px; height:200px; background:#090; margin: 20px; float:left;} #div3{width:300px; height:200px; background:#7109AA; margin: 20px;} .clear {clear:both}
<body> <div id="div1"></div> <div id="div2"></div> <div class="clear"></div> <div id="div3"></div> </body>
问题3：
通过父元素设置min-width来避免该问题。当浏览器宽度很小时，页面的布局必然被打乱，因此通过设置min-width，保证有一个足够大的容器可以容纳所有元素，布局便不会被打乱。
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
