网页里面的盒模型边距设置问题

[qq_36060405]

因为浏览器网页的不同，所以一般的盒模型宽度和高度尺寸都用百分比来表示，但是设置百分比之后再调整margin的时候它有时因为尺寸不对就突出来了，请问大神们这方法应该怎么解决？

[天际的海浪]

可以用calc()计算函数

margin: 10px;
width: calc(50% - 20px);

[yaotomo]

sass或者less预处理可以进行一些计算

[du2lon]

如果想不突出来就在父盒设置溢出隐藏：overflow:hidden;
你这个应该是子盒设置了浮动！如果子盒要浮动并且不溢出父盒的话就在子盒列表的最后加一个隐藏盒并设置清除浮动！

<div class="box">
<div class="list">列表</div>
<div class="list">列表</div>
<div class="list">列表</div>
<div class="cf"></div>
</div>

<style>
.box{whidth:100%; hight:100%}
.list{width:38%; hight:350px; float:left; display:inline;}
.cf{height:0; clear:both;}
</style>

PS: 注意浮动盒一定要设置显示为行内样式，否则 IE 浏览器下很容易出错！比如 IE 6 下浮动盒设置了 margin 后会变为值的两倍！比如你设置 margin-left 为10px，它实际会显示为20px