解决margin越界的常用的三种方法：
1.加border 可以解决 可以我并不需要这个border.
2.使用paddiing 如果盒模型是内容盒子的话 增大了整个盒模型，如果为border盒子类型，可以解决但是并不理想。
3.使用 overflow:hidden ,可是一般情况下都是子标签内容如果超出是显示的。不符合预想。
解决思路：主要是在父标签中添加第一个子标签，然后后面的子标签设置margin的时候就不会与父标签的margin重合。应为他的margin是找到第一个子元素为基准的。
关键代码：
使用伪类元素 ： 父元素：before{
content:' ';
display:table;
}
table的显示模式我就不在这里说明。目前感觉这种方式的代价是最小的，基本没有其它的影响。
同理margin-bottom也是这样解决的。是给父元素添加最后一个子元素。就可以解决子元素的越界问题。
解决上边界子元素margin越界的效果如图：
更好的解决子元素浮动对后续元素和父元素造成的影响
1.之前一直用overflow:hidden 来解决子元素浮动，造成父元素的塌陷问题。一直感觉这个解决方法不是很合理。然后前面元素如果浮动，在后面元素加上clear:both。来解决元素浮动对后续元素造成的影响。之后后来参考大神给的解决方法，逻辑和解决方式都是非常合理的。主要是关键代码很少。主要就是给父元素添加后置的内容生成。
关键代码：父元素：after{
content:' ';
display:table;
clear:both
}
感谢大神给出的思路。
