清除浮動的方式

1、額外標簽法（在最后一個浮動標簽后，新增加一個標簽，給其設置clear: both;）不建議使用

• 缺點：添加無意義標簽

2、父級添加overflow屬性（overflow:hidden）(不推薦)

通過觸發BFC方式，實現清除浮動

• 缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素

3、使用after偽元素清除浮動（推薦使用）

.clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}

4、使用before和after雙偽元素清除浮動

.clearfix:after,.clearfix:before{
  content: "";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}

5、父級div定義height

• 缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

過渡transition 動畫animation

過渡動畫：是從一個狀態 漸漸的過渡到另外一個狀態，經常和 :hover 一起 搭配使用。

• transition（簡寫屬性）： 要過渡的屬性 花費時間 運動曲線 何時開始

1. transition-property：(none | all | property)為哪些屬性設置過渡效果
2. transition-duration：定義過渡效果花費的時間。默認是 0
3. transition-timing-function：(linear|ease|ease-in|ease-out|ease-in-out)規定過渡效果的時間曲線。默認是 "ease"。
4. transition-delay：規定過渡效果何時開始。默認是 0。
   注：如果想要所有的屬性都變化過渡， 寫一個all 就可以。

.father .small {
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    float: left;
    /*1. transition: 要過渡的屬性  花費時間  運動曲線  何時開始;*/
    /*2. 如果有多組屬性，我們用逗號隔開*/
    /*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
    /*3. all 所有屬性都會變化*/
    /*transition:  all 1s ease 0s;*/
    /*4. 過渡寫到本身上，而不是 hover里面*/
    /*transition: all 0.5s;*/
    /*5. 擴展，可以設置不同時進行的動畫*/
    transition: width 1s, height 1s linear 1s, background-color 1s, transform 1s;
}

.father .small:hover {/* 鼠標經過盒子，我們的寬度變寬200，高度變高200 red */
    width: 200px;
    height: 200px;
    background-color: red;
    transform:rotate(45deg);
}

動畫animation

animation: name  duration  timing-function   delay    iteration-count    direction;

默認值： none 0 ease 0 1 normal

• animation-name : 要綁定到選擇器的關鍵幀（動畫）名稱
• animation-duration : 動畫持續時間
• animation-timing-function : 動畫的速度變化
• animation-delay : 延遲執行的時間
• animation-iteration-count : 動畫的播放次數
• animation-direction : 動畫運動的方向

.father .small {
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    float: left;
    position: relative;  /*這里一定要改為相對布局，否則位置不能改變*/
    animation: anim 5s infinite alternate;
}
/*animation：后anim表示這個動畫的名字，后面是持續5s*/
/*infinite（無限的，無數的）alternate（交替的輪流的）合在一起：無限輪替*/
@keyframes  anim{
    0%{background-color: cornflowerblue;left: 0px;top: 0px}
    25%{background:skyblue;left: 200px;top:0}
    50%{background-color: deepskyblue;left: 200px;top: 200px}
    75%{background-color: aqua;left: 0px;top: 200px}
    100%{background-color:cornflowerblue;left: 0px;top: 0px}
}

左邊固定，右邊自適應布局。

1. 左邊左浮動，右邊加個overflow:hidden;(注意，右邊margin-left數值小于左邊的寬度則無效)

   #lt{ float: left;width:200px; background: #ff0;}
   #rt{ overflow: hidden; background: #f0f;}

2. 左邊左浮動，右邊加個margin-left;

   #lt{ float: left; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}

3. 左邊絕對定位absolute或fixed，右邊加個margin-left;

   #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}

4. 左右兩邊絕對定位，右邊加個width,top,left,right

   #lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
   #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

右邊固定，左邊自適應的布局

1. 左邊左浮動，margin-left負值,右邊右浮動;

   #lt{float:left; width:100%;background: #00f;margin-right: -200px;}
   #rt{float: right; width: 200px;background: #ff0;}

2. 右邊絕對定位，左邊margin-right;

   #lt{margin-right:200px; background: #00f;}
   #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}

3. 左右兩邊絕對定位，左邊加個width,top,left,right

   #lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}
   #rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}

flex布局

• flex-container的屬性有flex-direction, flex-wrap, justify-content, align-items, align-content

flex-direction(主軸方向)：

1、 row（布局為一行，從start開始排）
2、 row-reverse(布局為一行，從end開始排)
3、column(布局為一列，從start開始排)
4、column-reverse(布局為一列，從end開始排)

flex-wrap(一條軸線排不下如何換行)：

1、nowarp (不換行，在一行顯示)
2、wrap(內容超過后換行)
3、warp-reverse(換行后有兩條軸線，reverse就是把軸線排列的順序倒置過來)

justify-content(主軸對齊方式)：

1、 flex-start (start側對齊，左對齊)
2、flex-end(end側對齊，右對齊)
3、center(中心對齊)
4、space-between(左右兩側沒有間距，中間間距相同)
5、space-around（左右兩側的間距為中間間距的一半）

align-items(交叉軸對齊方式)：

1、stretch; (拉伸)
2、flex-start（start側開始，上對齊）
3、flex-end（end側開始，下對齊）
4、center (中心對齊)
5、baseline（基線對齊）

align-content(多根軸線對齊方式)：

1）stretch (拉伸)
2）flex-start (start側開始，上對齊)
3）flex-end（end側開始，下對齊）
4）center (中心對齊)
5）space-between（上下沒有間距，中間各子元素間距相同）
6）space-around (上下間距之和等于中間各個間距)

flex-item相關屬性有order，flex-grow，flex-shrink，flex-basis，align-self

• order(排列順序)
• flex-grow（放大比例，剩余空間怎么分配,如下圖所示，剩余空間的分配比例是1:2:1）
• flex-shrink （縮小比例，超出空間怎么壓縮）
• flex-basis (item所占主軸空間，優先級高于width)
• align-self (對齊方式，覆蓋align-items)
  參考文章