1. 水平布局
子元素在其父元素中水平方向的位置由以下几个属性共同决定：
水平方向的七个值相加必须等于其父元素内容区的宽度；如果不等于，那么浏览器就会自动调整七个值中的某个值，让其成立，这就叫过度约束 。
如何调整：
1、七个值中如果没有auto，浏览器默认调整margin-right。
2、七个值中如果有auto，浏览器会调整auto；可设置auto有：margin-left，width，margin-right
（1）1个auto，谁是调谁；
（2）2个auto，有width调width，无width平分
总结 width>margin
例 margin：0 auto；居中显示
2、overflow属性
默认情况下，父元素的高度是被子元素撑开的，若父元素设置了，设置多少是多少。
子元素在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出，这个时候就要用overflow属性了
使用overflow属性设置父元素如何处理溢出？
可选值：
visble 默认值 子元素会从从父元素中溢出
hidden 溢出内容被裁剪不会显示
scroll 生成两个滚动条，通过其查看完整内容
auto 根据需要生成滚动条
3、CSS垂直外边距重叠
（1）兄弟元素
如果都是正值，谁大听谁；
如果一正一负，两者相加之和；
如果都是负值，谁小听谁。
（2）父子元素
垂直外边距重叠是发生在处于文档流的父子元素；当父元素和子元素的外边距相邻时，
如果设置子元素外边距，就会传递到父元素，从而导致页面布局混乱
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.block1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.block2{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="block1">
<div class="block2"></div>
</div>
</body>
</html>
解决方案
1.使子元素开启BFC属性：overflow：非visible的值
2.隔离父子元素的外边距，用边框
<body>
<div class="block1">
<table></table>
<div class="block2"></div>
</div>
</body>注意，这里要使用空的table，空的div没用
这样的方法并不是最完美的，通过CSS的伪元素，可以不用在html中添加多余的结构
block1:before{
display: table;
content: "";
}