浮動佈局
預設流式佈局有不足，浮動佈局可以使塊級標籤並排顯示。
格式：float:left/right/none none預設的不浮動
特點：
1.浮動初衷是為了實現字圍（新聞），後面才發現，浮動可以讓多個塊級標籤並排顯示。
2.在一個父元素內部，如果一個元素浮動了，那麼它就脫離了標準文件流，後面的元素就讓向上排
3.如果多個元素浮動了，那麼它們就會並排顯示，如果都是同一個方向的浮動，它們會緊緊地貼在一起。
4.如果一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接著，如果是左浮動，就向左移動，直到移動到父元素的左邊界，如果是向右浮動，就向右移動，直接移動到父元素的右邊界。
5.如果元素沒設定高度，那麼它的高度是由裡面的內容撐起來的，如果父元素內部的所有元素都浮動了，會造成該父元素的高度塌陷。
6.元素浮動對父元素造成影響：造成父元素高度塌陷。
7.元素浮動對兄弟元素造成影響。
8.浮動元素的包裹性：一個元素浮動後，這個盒子的寬度會盡可能小，小到剛好包裹住其中的內容
9.一個元素浮動後，其性質會發生變化，行級標籤浮動後可以設定寬高
10.若父元素也浮動了，就不會塌陷了
11.浮動元素只是半脫離了標準文件流
12.一個元素浮動了，那麼它也是受父元素的控制。當父元素寬度變小時，裝不下所有的子元素時，後面的子元素有貼靠性。當父元素小到極限時，裡面的浮動的子元素寬度是不會改變的。
複製程式碼浮動的應用： 新聞資訊的字圍效果、實現左右佈局、小導航、多個規則盒子水平排列
元素浮動會造成的影響
1.對父元素造成的影響
父元素高度塌陷
解決：加高法：給父元素加高度（基本不用）
小偏方(overflow:hidden):原本是處理內容溢位問題，後發現也可處理父元素高度塌陷問題
clear:both 在所有子元素後面加一個空的div 在這個div上面加clear:both ---> 內qiang法
優點：clear:both專業清除浮動的 缺點：多寫一個程式碼
2.對後面兄弟元素的影響
前面元素浮動後，該元素後面的兄弟元素會向上移動
解決：在受影響的元素上面加 clear:both
專案中最常用的清除浮動的方法：利用偽元素 .clear:after
就是寫一個清除浮動的類：.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;} 然後將該類寫到相關標籤中即可
複製程式碼flex佈局
一種新的佈局方式
flex佈局中有四大概念：
容器： 給一個標籤加"display:flex;"，那該標籤就變成了一個容器
橡木：容器中的直接子元素叫專案
主軸：專案預設排列順序的方向
交叉軸：和主軸垂直的那個軸
在容器中有幾個屬性：
flex-direction: direction(方向) 是否要改變主軸方向
row | row-reverse | column | column-reverse
flex-wrap: 容器中專案排滿一行的時候是否換行
nowrap | wrap | wrap-reverse
flex-flow: flex-direction flex-wrap 簡單方法，如下：
flex-flow:column nowrap
justify-content: 處理富餘空間
flex-start | flex-end | center | space-between | space-around
align-items: 專案在交叉軸上擺放的位置
flex-start | flex-end | center
align-content: 如果專案有多根主軸，決定多根主軸的排列方式，前提是專案足夠撐滿一行，並且允許換行
flex-start | flex-end | center | space-between | space-around | stretch
在專案中有幾個屬性：
order: 專案的排列順序。數值越小排列越靠前，預設為0；
flex-grow： grow 成長 如果有富餘空間，你可以讓專案變大一點
flex-shrink: shrink 縮小 如果專案足夠多，並且不換行，也就是說一行裝不下，那麼可以縮小專案
flex-basis： 專案在主軸上佔據的大小em
flex: flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。 flex:1表示平均分配富餘空間
align-self: 單獨去設定某一個專案的對齊方式
auto | flex-start | flex-end | center