本文介绍了CSS中Box Model的工作原理，包括边界、边框、填充等如何影响元素的最终尺寸，以及负的margin值对布局的影响。此外，还详细说明了如何通过添加一个额外的清除浮动div来解决父容器高度塌陷的问题。
1、box最后的显示大小等于box的border及border内的大小加上正的 margin值。而负的margin值不会影响box的实际大小，如果是负的top或left值会引起box的向上或向左位置移动，如果是bottom或 right只会影响下面box的显示的参考线。
2、我们经常向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。
<div class="clear"></div>
.clear{
clear:both;
height:0;
overflow:hidden
}
有时候怎么调都不通的时候，在元素上面加上上面属性的div块，可能能帮你解决问题。
解释：
clear : none | left |right | both
参数：
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
2、我们经常向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。
<div class="clear"></div>
.clear{
clear:both;
height:0;
overflow:hidden
}
有时候怎么调都不通的时候，在元素上面加上上面属性的div块，可能能帮你解决问题。
解释：
clear : none | left |right | both
参数：
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
扫一扫
3832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
