一、清除浮动
1.方法一：一个浮动元素的父亲（祖先）要有高度！有高度的盒子才能关住浮动！！ ( li本身是浮动的
)
2.方法二：不加高度用{ clear：both } （左右浮动都清除）margin会失效。
3.方法三：
外墙法 在两部分浮动中加一个div设置为浮动清除。隔离了两部分浮动，互不影响。
隔墙法 在其中一 个浮动内加一个div设置浮动清除。
4.方法四：overflow:hidden; 最好用！是偏方！不会margin失效！
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
浮动脱标的元素是不能撑起高度的。一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了。这是一个偏方。
清除浮动小例子：
<style type="text/css">
.news{
margin: 100px;
width: 400px;
height: 300px;
border: 1px solid black;
}
.news ul{
list-style: none;
}
.news ul li{
line-height: 60px;
overflow: hidden;
border-bottom:dashed 1px gray;
}
.news ul li span.name{
float: left;
}
.news ul li span.time{
float: right;
}/*css中class选择器前面不可以加空格*/
</style>
</head>
<body>
<div class="news">
<ul>
<li>
<span class="name">哈哈哈哈哈哈哈哈</span>
<span class="time">20160611</span>
</li>
<li>
<span class="name">呵呵呵呵呵呵呵呵</span>
<span class="time" >20160612</span>
</li>
<li>
<span class="name">啊啊啊啊啊啊啊啊啊</span>
<span class="time">20160613</span>
</li>
</ul>
</div>
</body>
</html>
二、IE6的兼容问题
1.第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。
height: 4px;
_font-size: 0px;
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
2.第二，IE6不支持用overflow:hidden;来清除浮动的
overflow: hidden;
_zoom:1;
IE6是可以兼容边框溢出的，不兼容的是清除浮动的功能。
三、margin的塌陷现象
标准文档流中，竖直方向的margin不叠加，以较大的为准。（浮动没有；水平方向是叠加的。）
比如有个margin-bottom和 margin-top 取大的！！
四、margin
1.margin：0 auto 盒子居中
① 必须有明确的width
②标准流 也就是不可以使用浮动 绝对相对定位
③居中的是盒子不是文本 text -align：center ，图片也要用文本居中
2.当left right 都设置auto 盒子也居中
※ 普及一下知识，text-align还有
text-align:left; 没啥用，因为默认居左
text-align:right; 文本居右
3.善于使用父亲的padding，而不是儿子的margin
父亲加了边框，儿子就不会连着父亲一起移动。
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，我们一定要善于使用父亲的padding，而不是儿子的margin。
五、margin的IE6的兼容问题
1.当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。比如li标签。
解决方案：
1）使浮动的方向和margin的方向，相反。经常这样用。
2）使用hack（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
2.IE6的3px bug
用儿子踹父亲，会出现IE6多出3px。
解决办法：
不用管，因为根本就不允许用儿子踹父亲。
六、firework 精确还原设计图
