标签：
一,使用浮动float
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>考察浮动</title> <style type="text/css"> #content { background-color: red; position: relative; padding: 12px;/*red 的padding+blue的margin =测的宽 */ overflow: hidden;/*父元素overflow:hidden 可以闭合浮动*/ } .div-in { width:107px; height: 54px; background-color: blue; margin:6px;/*测的各间距是12 一半是6 *//*margin不合并，因为float,正常位置是合并的*/ border:solid 1px #000000; float: left; } </style> </head> <body> <div id="content"> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> <div class="div-in">111</div> </div> </body> </html>
正常情况下，div与div之间测的是12就设12就好了，但是这是浮动，浮动的margin没有合并，会叠加，所以叠加后是12px ,那么每个蓝色div margin设为6px;
又测量红色背景边框据最近blue的div 距离是18px =6+12;
所以设外层div padding :12px
闭合浮动我这里用了父元素 设了overflow:hidden
可参考：那些年我们一起清除过的浮动
二待续：
标签：
原文地址：http://www.cnblogs.com/zhrn/p/4464066.html
