公司周六停电，终于可以双休了。用周五空余时间再夯实一下css基础，《CSS权威指南》概念性的内容看起来容易犯困，不如实践来得快，动手操作吧。
一、浮动布局
浮动存在问题：浮动使元素脱离文档流，导致下面的元素向上提。
布局存在问题：由于浮动元素宽度已设定，根据盒模型，对于有宽度的盒子添加padding border和magin导致盒子变大，从而挤出后面浮动元素，导致下移，称作“浮动移滑”。
围住浮动元素的三种方法：
1为父元素添加 overflow:hidden 强制包围浮动元素
2同时浮动父元素 后面的元素清除 clear:both
3 1、添加非浮动的清除元素 div 2、添加伪类 ： .class:after{conten:'.';display:'block';height:0;visibility:hidden;clear:both;}
解决“浮动移滑”方案：
1.从设定的元素宽度中减去添加的外边距，内边距和边框宽度和（一变化就容易出错）；
2.给元素添加一个div，把内容放到div中。
3 使用box-sizing:border-box 添加边距使内容收缩，而不是盒子变大。 ie6/ie7不支持。
三栏固定宽带布局（用到浮动和清除）
HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/> 7 </head> 8 <body> 9 <header>浮动与三栏固定宽度布局</header> 10 <div > 11 <nav>这是导航栏</nav> 12 <article>这是中间栏</article> 13 <aside>这是右边栏</aside> 14 </div> 15 <footer>这是角标</footer> 16 </body> 17 </html>