http://www.daqianduan.com/1282.html
https://www.cnblogs.com/0351jiazhuang/p/4525354.html
1. IE浏览器margin，padding双倍距解决
IE中float元素如果同时设置了margin值，此时margin的值会变为双倍，解决办法是在该元素中加入display:inline。已知了BUG的解决办法，我们就可以在代码编写时养成一个习惯。比如说我们在为元素添加了float和margin值时，就为这个元素补上一个 display:inline 这样就可以有效的避免页面出现双倍边距的BUG。
2.尽可能的少用，甚至不要使用负数的margin和padding
一般使用负数的margin和padding时，都是由于样式无法按照自己需要的方式移动，才“出此下策”。这么做很可能会给未来的元素样式带来很多奇怪的BUG，使后面的工作更加艰难。
如果遇到确实需要移动到一些元素之外的偏移操作，最好的方法是使用position来对元素进行定位。因为position这个属性定义是建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。因此我们使用position进行一些特殊的定位操作时最为理想的。
3.每一列浮动元素后，都要设置清除浮动
元素进行float操作后，会使元素浮出文档流，使其所在的父级元素无法跟随浮动元素的高度而改变自身高度。所带来的问题就是浮动元素超出了父级元素的包裹范围，若后面跟随有文字、或浮动元素，则会造成布局混乱。
因此我们在每一列的浮动元素代码最后都要进行清除浮动，使整个父级元素能够正常的包裹其内部的浮动元素，避免这些调皮的float元素四处捣乱。
最简单的清除浮动的方法是在最后一个浮动元素的后面加上
<div style=”clear:both”></div>