重慶分公司
重慶分公司
左側(cè)
右側(cè)
div+css布局，是前端開發(fā)人員的核心技能，在工作中占很大的比重。良好的前端布局是進(jìn)行javascript書寫和交互的基礎(chǔ)，足見布局的重要性，今天我們就講講css布局的基石-float?？梢哉f，沒有浮動(dòng)，就談不上布局了。
創(chuàng)新互聯(lián)公司長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為社旗企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，社旗網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。1、float的產(chǎn)生
互聯(lián)網(wǎng)產(chǎn)生從一開始到日漸壯大，期間借鑒了大量印刷排版的理念和技術(shù)，比如一開始互聯(lián)網(wǎng)的發(fā)明，就是將文檔電子化互相鏈接。
而后的table布局的發(fā)明，也是印刷專家完成的，直到css出現(xiàn)，依然可以看到印刷的影子，當(dāng)然這也無可厚非，比如float的出現(xiàn)就是為了應(yīng)對(duì)圖文并茂的排版出現(xiàn)的。
下面?zhèn)鹘y(tǒng)的印刷排版常見的布局-文字環(huán)繞，就是float的常見應(yīng)用場(chǎng)景之一。
我們看看如何實(shí)現(xiàn)，
JS暗黑編年史
在一個(gè)一個(gè)炎熱的下午，大家注意，一定要是炎熱的下午，為什么要是炎熱的下午呢，因?yàn)樘鞖庖粺?，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個(gè)時(shí)候老板娘進(jìn)來來了，對(duì)js的作者布萊登·艾克說，小艾啊你看我們用貓上網(wǎng)的時(shí)候用戶名密碼填錯(cuò)了結(jié)果等一兩分鐘返回結(jié)果的時(shí)候才知道是錯(cuò)了，你看你能不能搞一個(gè)程序讓我在請(qǐng)求之前就知道我寫錯(cuò)了，其實(shí)小艾心里不想搞，但是大家都懂的，老板好拒絕，老板娘的需求是不好拒絕的，所以布萊登艾克心想趕緊隨便糊弄一下算了，片兒還沒看完呢，所以他就用了8天半（官方說）10天，其實(shí)另外的一天半被他用來看片兒了。大家懂的，你看片兒的時(shí)候有心思寫代碼嗎？所以js的bug如山一樣多，這個(gè)我們以后說。
2.float的經(jīng)典場(chǎng)景
除了上面的經(jīng)典用法之外，float還有幾個(gè)更復(fù)雜也更通用的場(chǎng)景，首先是整站布局。
代碼如下，
我是頭部
js暗黑編年史
在一個(gè)一個(gè)炎熱的下午，大家注意，一定要是炎熱的下午，為什么要是炎熱的下午呢，因?yàn)樘鞖庖粺?，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個(gè)時(shí)候老板娘進(jìn)來來了，對(duì)js的作者布萊登·艾克說，小艾啊你看我們用貓上網(wǎng)的時(shí)候用戶名密碼填錯(cuò)了結(jié)果等一兩分鐘返回結(jié)果的時(shí)候才知道是錯(cuò)了，你看你能不能搞一個(gè)程序.
還有類似淘寶的商品布局也很普遍，
實(shí)現(xiàn)代碼如下，
Document
我是標(biāo)題
我是一段描述的文字我是一段描述的文字我是一段描述的文字我是一段描述的文字
3.float的常見問題
1.寬度不夠,會(huì)擠下來
Document
左側(cè)
右側(cè)
解決，
Document
左側(cè)
右側(cè)
如圖所示，大家會(huì)發(fā)現(xiàn)其實(shí)外層div的高度沒有撐開，這里我不想解釋原因，扯什么BFC啦，文檔流啦，為什么？
編程就像學(xué)習(xí)騎自行車，你看過別人怎么騎車，也知道踏板是用來蹬的，車座是用來座的，車把是用來掌握方向就夠了，你沒必要從一開始研究：
山地車30速對(duì)應(yīng)的是：這個(gè)山地車的變速套件是由3片式牙盤和10片式飛輪組成，可以變換30種傳動(dòng)比，也就是齒比。詳細(xì)的解釋是：前面牙盤有三個(gè)盤，后面飛輪有10個(gè)，3x10就是30速，如果后面有9個(gè)飛輪就是27速，速別就是前面的盤的數(shù)量乘后面輪的數(shù)量，一般情況下前面都是三個(gè)盤，主要差距在于后面的小飛輪，常見的速別有18、21、24、27、30。
畢竟你不可能一開始學(xué)騎車就想著將來成為秋名山車神。
即使你學(xué)會(huì)這些，對(duì)于你學(xué)習(xí)騎車沒有什么幫助，就像你即使知道了高度沒有撐起來是因?yàn)闆]有觸發(fā)BFC，就算是你知道了文檔流和常規(guī)流，知道了float的默認(rèn)值是none，對(duì)于你能流暢的布局有多少幫助呢？
我不是否認(rèn)這些知識(shí)的價(jià)值，是要讓你懂得輕重緩急。畢竟如果你連最基礎(chǔ)的float布局都寫得磕磕絆絆，你研究那些有什么意義呢？先把典型的布局記住，學(xué)會(huì)，用熟，然后再聊其他的。繼續(xù)第二個(gè)問題，
2.高度不夠，直接一句話，記住就好
Document
左側(cè)
右側(cè)
其實(shí)就一句話，
overflow: hidden;先記住就好，等你長大了就明白了。
說第三個(gè)問題，
明顯footer位置不對(duì)，這是一個(gè)特性，float后面的元素會(huì)自動(dòng)跟隨，并盡量靠上靠左。問題是明顯footer是不愿意跟著右側(cè)元素混的，他應(yīng)該在下面。咋弄？清除浮動(dòng)。
Document
左側(cè)
右側(cè)
注意，這里在left和right外面包了一層div，然后添加了class
.clearFix:after {
content: '';
display: block;
clear: both;
}
.clearFix {
zoom: 1;
}這里你不會(huì)都沒關(guān)系，先記住會(huì)用就好。記住代碼就像騎自行車，騎得多了自然就知道怎么騎了，熟練了以后再去騎山地車，公路車，入門就會(huì)很快。
目前你已經(jīng)掌握了float的基礎(chǔ)入門，走起吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
