浮動(float)內容概覽：
普通流浮動
浮動詳細內幕特性
布局流程
清除浮動
額外標籤法
父級新增 overflow 屬性方法
使用 after 偽元素 清除浮動
使用 before 和 after 雙偽元素 清除浮動
浮動(float)
普通流(標準流)(normal flow)
網頁布局的核心，其實就是用css來擺放盒子位置。那麼如何將盒子擺放到合適的位置？
css的定位機制有3種，普通流(標準流)、浮動 和 定位。
標準流：html語言中另乙個相當重要的概念；或者可以稱為 普通流，或者 文件流。
標準流 實際上就是乙個網頁內標籤元素 按照從上而下、從左至右 的排列順序；其實就是塊元素、行內元素的一些基本排列
浮動(float)
浮動最早是用來做 文字環繞效果的；
後來發現 浮動可以使三個 div 排列在一行，便用來做 網頁布局了；
定義：元素的浮動 是指設定了浮動屬性的元素會 脫離標準普通流的控制，移動到其父元素指定的位置的過程。在css中用 float 來定義浮動；
浮動的目的：就是為了讓多個塊級元素在同一行上顯示；
語法格式如下：
float：屬性值；
浮動詳細內幕特性：
脫離標準流，不佔位置，會出現盒子疊加效果，只有左右浮動。所以為了不影響標準流，會先建立乙個父級元素，然後在再其內建立孩子盒子的浮動；
浮動首先建立 包含塊 的概念(包裹)。
就是說，浮動的元素總是找離它最近的父級元素對齊，但不會超過內邊距的範疇。
注意：要想使父級元素中的所有盒子都浮動在一行，那麼每乙個盒子都需要新增 float 屬性，否則不能使其排列在一行。
元素 新增 浮動 後，會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設內容的多少
布局流程
為了提高網頁製作的效率，布局時通常需要遵守一定的布局流程，具體如下：
確定頁面的版心(可視區)
分析頁面中的行模組，以及每個行模組中的列模組(先行後列)
製作html結構
css初始化(利用萬用字元選擇器 *{} ，清除body預設的內外邊距)，然後運用盒子模型的原理，通過div+css布局來控制網頁的各個模組。
清除浮動
當父級元素沒有定義高度，而子元素都浮動的時候，會造成上下盒子重疊，此時便需要清除浮動。
清除浮動 本質叫做 閉合浮動；清除浮動就是把浮動的盒子圈起來，讓父盒子閉合出口和入口，不讓他們出來影響其他元素。
在css中，clear 屬性用於清除浮動，基本語法格式如下：
clear：屬性值；
額外標籤法
是w3c推薦的做法；通過在浮動元素末尾新增乙個空的標籤，例如
或者其他標籤
css 設定浮動和清除浮動
首先更正一點clear不是乙個標籤，它是css中的乙個屬性。其屬性值有四個clear both left right none 簡單來說呢，clear屬性的作用就是 清除 浮動。如果某元素設定clear left 表示該元素左邊不存在浮動元素 相應的，clear right 表示該元素右邊不存在浮動...
設定隔離層清除浮動
浮動的影響 title style type text css div1,div2,div3,div4 div1 div2 div3 div4 box box1 style head body div class box div class div1 div div class div2 div d...
利用平移（transform），設定元素浮動效果
1 doctype html 2 html 3 head 4 meta charset utf 8 5 title 變形 title 6 style 78 box1 1718 box1 hover 2223 24style 25head 26 body 2728 div class box1 div...