浮動會使元素【脫離文件流】並按照【指定的方向】排列，
直到遇到父元素的邊界或另乙個浮動元素【停止】
文件流 文件中所有可見元素的排列佔位
預設塊元素從上向下排列
內聯元素從左向右排列
float:
left左浮動 從左向右排列元素
right右浮動 從右向左排列
none不浮動(預設)
浮動元素特性
1.脫離文件流（不再佔原來位置）
2.提公升層級（覆蓋關係）
//css
div//html
="box3"
>
<
/div>
="box3"
>
<
/div>
="box3"
>
<
/div>
="box3"
>
<
/div>
="box3"
>
<
/div>
影響後續布局
解決方法（清浮動）
1.給父元素 固定高度
缺點：不夠靈活
2. 在浮動元素最後加乙個不浮動，空的，塊元素
clear:both;不允許元素左右兩側出現浮動元素（兩側抗浮動）
缺點：結構冗餘 **可讀性差
3. .clearfix加給浮動元素的父元素（推薦方法）
.clearfix:after
4. 父元素 overflow:hidden/auto/scroll
缺點：存在溢位內容發生隱藏（顯示滾動條等)隱患
//給父元素高
.wrap
//新增乙個空元素，不浮動
.wrap
.box
.cleardiv
// 偽類
.clearfix
/* 處理相容 */
.clearfix:after
.wrap
.box
// overflow
.wrap
.box
="wrap clearfix"
>
="box"
>
<
/div>
="box"
>
<
/div>
="box"
>
<
/div>
="cleardiv"
>
<
/div>
<
/div>
1.脫離文件流（不再佔原來位置）
2.提公升層級（覆蓋關係）
3.會使未定義寬度的塊元素適應內容
4.不會出現margin值疊加
5.浮動引起文字繞排（脫離文件流不脫離文字流）
float:left right
display:block inline-block
left 抗左浮動
right 抗右浮動
both 抗左右浮動
前端CSS部分 重新認識浮動float
1 浮動產生的背景 1 1 為什麼會出現浮動呢？浮動最初出現的時候只是為了實現文字環繞的效果。並沒有想過它可以應用於我們現在的頁面布局中。1 2 文字環繞的原理 在沒有設定浮動的時候，元素可以通過自身的寬高值，將盒模型中的父元素的寬高給撐開。元素設定浮動之後，破壞了其inline boxes模型，失...
重新認識container
我還清楚的記得，第一次從 那兒聽說container這個詞 結果他給我解釋了半天還是似懂非懂的。今天，偷閒翻了下posa4,發現裡面對container的解釋特別清楚。粗略的理解下來是，為了分離關注點，而實現的對系統資源的封裝。豁然開朗的發現，os就是應用程式的container。突發奇想的，開發乙...
重新認識測試
以前總覺得測試是軟體開發的邊緣職位，開發人員才是軟體生命週期的核心人員。隨著對網際網路公司的了解，逐步了解到測試的重要性。以bat為例，三家公司均設定了測試開發工程師崗位，該崗位的主要職責就是編寫自動化測試案例，通過對 的邏輯進行分析，設計出能夠覆蓋大部分 的測試用例。如阿里的測試開發工程師的崗位描...