1、浮動產生的背景
1-1、為什麼會出現浮動呢？
浮動最初出現的時候只是為了實現文字環繞的效果。並沒有想過它可以應用於我們現在的頁面布局中。
1-2、文字環繞的原理
在沒有設定浮動的時候，元素可以通過自身的寬高值，將盒模型中的父元素的寬高給撐開。
元素設定浮動之後，破壞了其inline boxes模型，失去了高度，使得其他inline boxes可以圍繞浮動元素重新排列。而包裹它的父元素就不會被該元素撐開了。
2、浮動的本質
浮動的本質就是包裹性和破壞性。下邊詳細解釋什麼是包裹性，什麼是破壞性：
2-1、包裹性
元素的包裹性就是說父元素的width值會收縮到與內部元素寬度一樣，包裹只是讓元素的水平空間收縮。
常見的具有包裹性的元素：absolute、fixed、float、inline-block、inline-flex、table-cell；這些元素都有乙個共同的特性：會產生bfc（塊級格式化上下文）。【至於什麼是bfc，請檢視： 】
舉個例子來說：div標籤，是乙個塊級元素，當我們沒有給該元素設定float:left/right時，它預設的寬度值是100%，即獨佔一行；但是，如果我們設定了float屬性之後，它的寬度值就會與其包裹的內部元素的寬度值一樣。
具體效果如下：
1>、沒有設定float屬性時
2>、設定float屬性時
2-2、破壞性
破壞性就是指破壞了元素的line boxes。要想理解破壞性，我們只要搞清楚文字可以環繞的原理即可。要了解破壞性，我們首先需要掌握兩個知識點：line boxes和inline boxes。
2-2-1、什麼是inline boxes?
我理解的inline boxes指的就是我們常見的行級元素和文字內容；這些元素通常會排成一行，如span、input這些元素就是有名的inline boxes，文字內容就是匿名的inline boxes。
2-2-2、什麼是line boxes?
line boxes就是由inline boxes組合起來的行盒子。line boxes的高度值是由其內部最高的inline boxes的高度值決定的。
結合實際例子來說明：有兩個img標籤，height值分別為60px和30px，line boxes的最大高度就是由其內部最高的inline boxes的高度值決定的。
2-2-3、文字環繞的原理
和文字都屬於同一box型別的元素，預設情況下，一張只能與一行文字對齊，如果想要讓一張與多行文字對齊，我們只能破壞inline boxes模型了。
當給乙個元素設定了浮動之後，該元素本身的inline boxes模型被破壞，與文字就不屬於同一box型別了，這個時候，會從line boxes模型中脫離出來，按照自己的方式排列；而line boxes由inline boxes組成，inline boxes模型被破壞之後，元素本身失去了其高度值，所以line boxes也就失去了高度值。
上述兩種結果的產生恰恰給文字環繞創造了必要條件。
inline boxes是高度形成的基礎，浮動破壞了inline boxes模型，也就沒有高度可言了。正是由於浮動元素沒有了inline boxes，也就失去了高度，才能讓其他inline boxes元素重新整合，環繞浮動元素排列。
3、如何清除浮動產生的影響
3-1、使用空標籤清除浮動
這個做法的好處是相容性強，但是新增了多餘的標籤，造成了浪費
.clear
空標籤清除浮動
與使用div標籤清除浮動的方式一樣
只是清除了當前浮動帶來的影響，但是會給與父元素同級的元素帶來新的影響，容易出問題
#parent
#child
導致父元素無法使用margin：0 auto；實現居中
3-5、overflow + zoom方法
overflow: hidden;會導致溢位的元素被截斷
.clearfix推薦做法
.clearfix
.clearfix:after
重新認識web前端 浮動問題的總結
浮動會使元素 脫離文件流 並按照 指定的方向 排列，直到遇到父元素的邊界或另乙個浮動元素 停止 文件流 文件中所有可見元素的排列佔位 預設塊元素從上向下排列 內聯元素從左向右排列 float left左浮動 從左向右排列元素 right右浮動 從右向左排列 none不浮動 預設 浮動元素特性 1.脫...
重新認識container
我還清楚的記得，第一次從 那兒聽說container這個詞 結果他給我解釋了半天還是似懂非懂的。今天，偷閒翻了下posa4,發現裡面對container的解釋特別清楚。粗略的理解下來是，為了分離關注點，而實現的對系統資源的封裝。豁然開朗的發現，os就是應用程式的container。突發奇想的，開發乙...
重新認識測試
以前總覺得測試是軟體開發的邊緣職位，開發人員才是軟體生命週期的核心人員。隨著對網際網路公司的了解，逐步了解到測試的重要性。以bat為例，三家公司均設定了測試開發工程師崗位，該崗位的主要職責就是編寫自動化測試案例，通過對 的邏輯進行分析，設計出能夠覆蓋大部分 的測試用例。如阿里的測試開發工程師的崗位描...