大家好，我是IT修真院北京分院第22期的學員楊綱，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
浮動是怎么誕生的？浮動最初設(shè)計的目的并沒那么多事兒，就只是用來實現(xiàn)文字環(huán)繞效果而已。
但是早期的前端開發(fā)者發(fā)現(xiàn)：浮動的元素可以設(shè)置寬高并且可以內(nèi)聯(lián)排列，是介于inline和block之間的一個神奇的存在， 在inline-block出來之前，浮動大行其道。直到inline-block出來后，浮動也有它自己獨特的使用場景。
2.知識剖析
浮動到底是什么？ 浮動核心就一句話：浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。請默念3次！提到文檔流，那 下面我們講講什么是文檔流。
2.1 文檔流的概念
文檔流是文檔中可顯示對象在排列時所占用的位置。
將窗體自上而下分成一行行顯示，并在每行中按從左到右的順序排放元素的效果，就是文檔流直觀的表現(xiàn)。
2.3 浮動的屬性值
浮動的屬性值有三個：float：none；float：left；float：right；
浮動不是任意的，其還是在父元素的范圍之中，不能脫離于父元素的內(nèi)容區(qū)域。
我們回到前面那個頁面看看，浮動元素能不能浮動到父元素外面去
3.常見問題及為什么要清除浮動
如果我們不給父元素設(shè)置高度，我們知道如果它里面的元素不浮動的話， 那么這個外層的高是會自動被撐開的。
若浮動元素比它的父元素還高，那么它就會溢出父元素外面，點我看浮動元素溢出
當內(nèi)層元素所有浮動后，則影響更大：
（1）背景不能顯示
（2）邊框不能撐開
（3）高度塌陷等
4.解決方案
方法1：父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
建議：不推薦使用，只建議父元素高度固定的布局時使用
方法2：
使用clear屬性：在相同的父元素中，浮動的子元素之后添加一個空標簽，設(shè)置樣式為："clear：both;"標簽可以是div，也可以是p，或者br等塊元素。
原理：left在左側(cè)不允許浮動元素; right在右側(cè)不允許浮動元素; both在左右兩側(cè)均不允許浮動元素點我使用clear屬性
優(yōu)點：通俗易懂，容易掌握，適合菜鳥前期使用。
缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結(jié)構(gòu)與表現(xiàn)的分離，一旦代碼量大的話，在后期維護中將是噩夢。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法。
方法3：對父元素設(shè)置overflow的樣式，即overflow: auto/hidden;
原理：必須定義width，在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點：內(nèi)容增多時候容易造成不會自動換行導致內(nèi)容被隱藏掉，不能和position配合使用，無法顯示需要溢出的元素；
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
5.編碼實戰(zhàn)
6.擴展思考
還有哪些清楚浮動的方法
7.參考文獻
參考二：學習CSS布局
8.更多討論
討論點：float浮動會使元素脫離文檔流，那使用position屬性的原理進行元素的定位是不是和它是一樣使元素脫離文檔流呢？假如脫離的話，他們是不是浮動到同一個層面上了？
鳴謝
感謝大家觀看
同時也感謝：胡嘉杰師兄，高峰師兄的指點
課后問答：
問：偽元素是什么？
偽元素是相對于元素的說法，用于向某些選擇器設(shè)置特殊效果。
問：偽類的使用規(guī)則？
答：菜鳥和w3school講的很清楚http://www.w3school.com.cn/css/css_pseudo_classes.asp
問：為什么說設(shè)定父元素定高很low？
特別是動態(tài)頁面中，浮動的子元素個數(shù)是會發(fā)生變化的，定高的父元素并不能滿足要求，最終還是會出現(xiàn)子元素溢出的。
ppt鏈接：https://ptteng.github.io/PPT//PPT/css-01-float-clear-yg.html#/
視頻鏈接：視頻密碼：q0jj
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學習的節(jié)奏，學習的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導?？靵砼c我一起學習吧?！
