1 標準文檔流：
定義：web 網頁的製作，是個“流”，從上而下。
1.空白摺疊現象
多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，在一行內寫img標籤則沒有此現象。
2.高矮不齊，底邊對齊
文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊
3.自動換行，一行寫不滿，換行寫
如果在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示我們的文字。
2 浮動
float: none left right
特性：
1.浮動的元素脫標
2.浮動的元素互相貼靠(並排緊靠)
3.浮動的元素由"字圍"效果
4.收縮的效果（沒有設置width，那麼就自動收縮爲文字的寬度）
清除浮動:(浮動會給頁面帶來混亂)
1.給父盒子設置高度
2.clear:both left right
3.僞元素清除法
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然後設置
.clearfix:after{
/*必須要寫這三句話*/
content: '.';
clear: both;
display: block;
}
4.overflow：hidden
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
3 margin的塌陷
兩個標準流下兄弟盒子 設置垂直方向上的margin時，那麼以較大的爲準，小的那個被覆蓋。
解決：
給兩個標準流下的兄弟盒子設置浮動之後，就不會出現margin塌陷的問題。
4 margin: 0 auto
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto; //必須要設置width
/*水平居中文字*/
text-align: center;
}
5 善用父親的padding
父親沒有border，那麼兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border就好了。
我們不可能在頁面中無緣無故的去給盒子加一個border，所以使用父親的padding，讓子盒子擠下來。