文件流

文件流為元素沒有改變特性時原本所要排列的位置和規則：
文件流為最底層
塊級 獨佔一行等在最底層排列，依次往下排列。

給上浮動之後，會把元素堆積起來，不佔文件流的位置。
浮動 可以讓元素脫離文件流。

浮動元素

浮動元素在文件流內不佔位置，後面的文件流元素，就會佔住浮動元素原來的位置。但是文字不會藏在浮動元素下面，因為一開始浮動元素出來的目的是為了做出圖文環繞的效果。浮動對文字的影響：文字會環繞浮動元素。
但是浮動元素在同一層，同樣為浮動元素會展示出相鄰的效果，不是覆蓋。

作用：
讓元素既能佈局，又能橫排顯示。

浮動元素特性

任何元素，不管是塊級元素還是行內元素，只要是給了浮動，就含有以下浮動特性：
一、浮動元素不佔文件流的位置。

和行內塊的區別：
1、不會解析空格。
2、不會存在垂直對齊問題。
3、脫離文件流。

遇到的情況

一、父級寬度不夠，浮動元素掉下來
要麼增大父級盒子寬度，要麼縮小浮動元素寬度。
二、浮動元素被卡住
1、上一行的浮動元素height過高。
2、上一行的浮動元素margin-top或者margin-bottom過多，用hover的時候會被卡住，所以儘量hover不用margin-top。

清除浮動帶來的問題

浮動的框可以左右移動，直到遇到另一個浮動框或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響塊級元素的佈局，只會影響內聯元素佈局。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現“高度塌陷”。
浮動元素本身不能清除浮動。

h1{
    clear:both;//清除浮動防止父級高度塌陷。
}

但是不適合ul li這種嚴格的父子級標籤，缺點是造成程式碼冗餘添加了無用的空標籤。
4、給父級新增一個display:inline-block;，但是不要使用，因為會產生解析空格和基線對齊的問題。
5、如果父級是浮動元素的話，那麼高度不會塌陷，但是要給父級的父級清除浮動。
6、偽元素 通過CSS建立的一個沒有名字的行內元素，一般是裝小圖示做小東西。
:before

div:before{
content:"hello";
}

清除浮動，給父級最後新增偽元素：
給頁面內所有浮動元素都新增上class=clearfix，這是清除浮動的終極方法。

.clearfix:after{
    display:block;//建立塊級標籤，如方法3
    content:"";//讓塊級標籤內容為空。
    clear:both;//清除浮動。
}

低版本ie需要加上：

.clearfix{
    zoom:1;
}

怪異盒模型

一般在移動端裡使用居多。

標準和模型裡 width和height是內容區域的寬高。
整個盒子的實際大小就是內容區域+padding+border

轉化為怪異盒模型：

  box-sizing:border-box;

怪異盒模型裡，width和height是整個盒子的大小。
內容區域的大小=width*height-padding-border