请无视此条
外边距margin
设置边框以外，盒子和盒子之间的距离
margin: 10px;
margin: 10px 20px;/* 上下各10px 左右各20px*/
margin: 10px 20px 30px;/* 上10px 左右各20px 下30px*/
margin: 10px 20px 30px 40px;/* 上10px 右各20px 下30px 左40px*/
单方向
margin-left: 20px;
margin-top: 40px;
margin-bottom: 50px;
margin-right: 40px;
清除默认的内外边距
margin:0
padding:0
body默认有margin：8px
p默认有上下的margin
ul默认有margin和padding-left

外边距问题
水平布局的盒子，左右的margin正常，互不影响

外边距折叠现象(2种)
垂直布局的块级元素，上下的margin会合并
最终两者的距离为margin的最大值
避免这种问题，只给其中一个盒子设置margin即可

塌陷
互相嵌套的块级元素，子元素的margin-top会作用在父元素上 ，导致父元素一起往下移动
解决方法：
1：给父元素设置padding-top,父元素的高度根据需求要自减
2：给父元素设置overflow:hidden,子元素的margin-top不能去掉
3：设置浮动

常见文档流排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素 或行内块元素 从左往右 水平布局 空间不够自动换行

浮动float:
浮动元素会脱离标准流，在标准流中不占位置
浮动找浮动，下一个浮动元素会在上一个浮动元素【后面左右】浮动
浮动元素有特殊的显示效果
1：一行可以显示多个
2：可以设置宽高
3：浮动元素不设置宽高，没有内容，宽高各为0