4月26日，命令列與CSS浮動，清除浮動

關於命令列：

可使用win自帶win+r或git命令列提高工作效率，建立指令碼。

關於浮動：

行內元素和塊級元素的區別：

行內元素：

塊級元素：

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。

塊級元素可以轉換為行內元素：

display: inline;

那麼，這個標籤將立即變為行內元素，此時它和乙個span無異。inline就是「行內」。也就是說：

行內元素轉換為塊級元素：

display: block;

那麼，這個標籤將立即變為塊級元素，此時它和乙個div無異。block」是「塊」的意思。也就是說：

關於清除浮動：

使乙個元素脫離標準文件流的方法有：

關於浮動的解決方法有

1.使用clear : none | left | right | both

none : 預設值。允許兩邊都可以有浮動物件

left : 不允許左邊有浮動物件

right : 不允許右邊有浮動物件

both : 不允許有浮動物件

2.給父元素新增高度

3.外隔牆法和內隔牆法

4.給父元素新增overflow:hidden,原因：bfc

5.給父元素新增overflow:auto

6.父元素設定after,新增偽類。

原理：利用:after和:before來在元素內部插入兩個元素塊，從而達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html中插入乙個div.clear標籤，而outer利用其偽類clear:after在元素內部增加乙個類似於div.clear的效果。

.outer //為了相容性，因為ie6/7不能使用偽類，所以加上此行**。

.outer:after

其中clear:both;指清除所有浮動；content:' . '；display:block; 對於ff/chrome/opera/ie8不能缺少，其中content()取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。

利用偽元素，就可以不再html中加入標籤。

:after 的意思是再.outer內部的最後加入為元素:after，

首先要顯示偽元素，所以display:block，

然後為偽元素加入空內容，以便偽元素中不會有內容顯示在頁面中，所以， content:""；

其次，為使偽元素不影響頁面布局，將偽元素高度設定為0，所以， height:0，

最後，要清除浮動，所以，clear:both。

tips:

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。