解决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

}

感谢大神给出的思路。