大家好早直，我是IT修真院北京分院第22期的學(xué)員楊綱做院，一枚正直純潔善良的WEB前端程序員嘹裂。
1.背景介紹
浮動(dòng)是怎么誕生的妄壶？浮動(dòng)最初設(shè)計(jì)的目的并沒(méi)那么多事兒，就只是用來(lái)實(shí)現(xiàn)文字環(huán)繞效果而已寄狼。
但是早期的前端開(kāi)發(fā)者發(fā)現(xiàn)：浮動(dòng)的元素可以設(shè)置寬高并且可以內(nèi)聯(lián)排列丁寄，是介于inline和block之間的一個(gè)神奇的存在， 在inline-block出來(lái)之前泊愧，浮動(dòng)大行其道伊磺。直到inline-block出來(lái)后，浮動(dòng)也有它自己獨(dú)特的使用場(chǎng)景拼卵。
2.知識(shí)剖析
浮動(dòng)到底是什么奢浑？ 浮動(dòng)核心就一句話：浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素腋腮。請(qǐng)默念3次雀彼！提到文檔流，那 下面我們講講什么是文檔流即寡。
2.1 文檔流的概念
文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置徊哑。
將窗體自上而下分成一行行顯示，并在每行中按從左到右的順序排放元素的效果聪富，就是文檔流直觀的表現(xiàn)莺丑。
2.3 浮動(dòng)的屬性值
浮動(dòng)的屬性值有三個(gè)：float：none；float：left墩蔓；float：right梢莽；
浮動(dòng)不是任意的，其還是在父元素的范圍之中奸披，不能脫離于父元素的內(nèi)容區(qū)域昏名。
我們回到前面那個(gè)頁(yè)面看看，浮動(dòng)元素能不能浮動(dòng)到父元素外面去
3.常見(jiàn)問(wèn)題及為什么要清除浮動(dòng)
如果我們不給父元素設(shè)置高度阵面，我們知道如果它里面的元素不浮動(dòng)的話轻局， 那么這個(gè)外層的高是會(huì)自動(dòng)被撐開(kāi)的洪鸭。
若浮動(dòng)元素比它的父元素還高，那么它就會(huì)溢出父元素外面仑扑，點(diǎn)我看浮動(dòng)元素溢出
當(dāng)內(nèi)層元素所有浮動(dòng)后览爵，則影響更大：
（1）背景不能顯示
（2）邊框不能撐開(kāi)
（3）高度塌陷等
4.解決方案
方法1：父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題镇饮。
優(yōu)點(diǎn)：簡(jiǎn)單蜓竹、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局储藐，要給出精確的高度梅肤，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
建議：不推薦使用邑茄，只建議父元素高度固定的布局時(shí)使用
方法2：
使用clear屬性：在相同的父元素中，浮動(dòng)的子元素之后添加一個(gè)空標(biāo)簽俊啼，設(shè)置樣式為："clear：both;"標(biāo)簽可以是div肺缕，也可以是p，或者br等塊元素授帕。
原理：left在左側(cè)不允許浮動(dòng)元素; right在右側(cè)不允許浮動(dòng)元素; both在左右兩側(cè)均不允許浮動(dòng)元素點(diǎn)我使用clear屬性
優(yōu)點(diǎn)：通俗易懂同木，容易掌握，適合菜鳥(niǎo)前期使用跛十。
缺點(diǎn)：可以想象通過(guò)此方法彤路，會(huì)添加多少無(wú)意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離芥映，一旦代碼量大的話洲尊，在后期維護(hù)中將是噩夢(mèng)。
建議：不推薦使用奈偏，但此方法是以前主要使用的一種清除浮動(dòng)方法坞嘀。
方法3：對(duì)父元素設(shè)置overflow的樣式，即overflow: auto/hidden;
原理：必須定義width惊来，在IE6中還需要觸發(fā) hasLayout 丽涩，例如 zoom：1，同時(shí)不能定義height裁蚁，使用overflow:hidden時(shí)矢渊，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉枉证，不能和position配合使用矮男，無(wú)法顯示需要溢出的元素；
建議：只推薦沒(méi)有使用position或?qū)verflow:hidden理解比較深的朋友使用刽严。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
還有哪些清楚浮動(dòng)的方法
7.參考文獻(xiàn)
參考二：學(xué)習(xí)CSS布局
參考三：css清除浮動(dòng)float的三種方法總結(jié)
8.更多討論
討論點(diǎn)：float浮動(dòng)會(huì)使元素脫離文檔流昂灵，那使用position屬性的原理進(jìn)行元素的定位是不是和它是一樣使元素脫離文檔流呢避凝？假如脫離的話，他們是不是浮動(dòng)到同一個(gè)層面上了眨补？
鳴謝
感謝大家觀看
同時(shí)也感謝：胡嘉杰師兄管削，高峰師兄的指點(diǎn)
課后問(wèn)答：
問(wèn)：偽元素是什么？
偽元素是相對(duì)于元素的說(shuō)法撑螺，用于向某些選擇器設(shè)置特殊效果含思。
問(wèn)：偽類的使用規(guī)則？
答：菜鳥(niǎo)和w3school講的很清楚http://www.w3school.com.cn/css/css_pseudo_classes.asp
問(wèn)：為什么說(shuō)設(shè)定父元素定高很low甘晤？
特別是動(dòng)態(tài)頁(yè)面中含潘，浮動(dòng)的子元素個(gè)數(shù)是會(huì)發(fā)生變化的，定高的父元素并不能滿足要求线婚，最終還是會(huì)出現(xiàn)子元素溢出的遏弱。
ppt鏈接：https://ptteng.github.io/PPT//PPT/css-01-float-clear-yg.html#/
視頻鏈接：視頻密碼：q0jj
今天的分享就到這里啦，歡迎大家點(diǎn)贊塞弊、轉(zhuǎn)發(fā)漱逸、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師游沿，現(xiàn)在開(kāi)始饰抒，找個(gè)師兄，帶你入門诀黍，掌控自己學(xué)習(xí)的節(jié)奏袋坑，學(xué)習(xí)的路上不再迷茫”眯勾。
這里是技能樹(shù).IT修真院枣宫，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化吃环，成長(zhǎng)可見(jiàn)化镶柱，師兄1對(duì)1免費(fèi)指導(dǎo)∧Ｐ穑快來(lái)與我一起學(xué)習(xí)吧?歇拆！
