整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
碼講解 定位+浮動(dòng)布局，深入了解浮動(dòng)加定位，為深入復(fù)雜布局夯實(shí)基礎(chǔ)
eb頁(yè)面布局技術(shù)主要css2.0中主要出現(xiàn)了浮動(dòng)布局與定位，以及css3中新的布局方式彈性布局。
對(duì)于web頁(yè)面布局史中，浮動(dòng)與定位統(tǒng)治了所有頁(yè)面的布局。定位有不可替代的優(yōu)點(diǎn)，主要的優(yōu)點(diǎn)是可以實(shí)現(xiàn)多層級(jí)結(jié)構(gòu)，且子元素的位置不局限于父元素的范圍內(nèi)。
浮動(dòng)布局主要用于解決多個(gè)塊元素共存于一行的問(wèn)題。雖然浮動(dòng)可以解決多個(gè)塊元素共存一行的問(wèn)題，但是也會(huì)有非常不好的影響。
影響一，浮動(dòng)元素會(huì)脫離文檔流，使用浮動(dòng)技術(shù)后，還要清除浮動(dòng)的影響。
圖1：元素浮動(dòng)
圖2：清除浮動(dòng)
影響二，在多個(gè)塊元素共存于一行后，在塊元素的寬度無(wú)法達(dá)到父元素的寬度時(shí)，為了美觀，會(huì)采用等距分隔或等距環(huán)繞設(shè)計(jì)。對(duì)于這樣的設(shè)計(jì)，則需要人為的，精確的計(jì)算塊元素的外邊距。
圖3：精確計(jì)算實(shí)現(xiàn)等距分隔
由于浮動(dòng)技術(shù)有很多的缺點(diǎn)，所以將會(huì)受到很大的沖擊，它的對(duì)手將是彈性布局。彈性布局主要作用是，設(shè)置父元素內(nèi)的多個(gè)塊元素的排列順序以及分布方式。
彈性布局與浮動(dòng)相比，不但可以實(shí)現(xiàn)多個(gè)塊元素共存于一行，而且對(duì)父元素沒(méi)有不好的影響，同時(shí)實(shí)現(xiàn)子元素等距分隔，或等距環(huán)繞并不需要人為的計(jì)算。彈性布局會(huì)自動(dòng)計(jì)算。
圖4：彈性布局
圖5：實(shí)現(xiàn)等距離分隔
結(jié)束語(yǔ)：
望此文成為一盞明燈，指引你們來(lái)時(shí)的路。
通流(normal flow)
這個(gè)單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。
前面我們說(shuō)過(guò)，網(wǎng)頁(yè)布局的核心，就是用CSS來(lái)擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。
html語(yǔ)言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。普通流實(shí)際上就是一個(gè)網(wǎng)頁(yè)內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。
浮動(dòng)(float)
浮動(dòng)最早是用來(lái)控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果。
后來(lái)，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動(dòng)的特性來(lái)布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁(yè)布局）
什么是浮動(dòng)？
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過(guò)程。
在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器{float:屬性值;}
浮動(dòng)詳細(xì)內(nèi)幕特性
浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。
浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）。就是說(shuō)， 浮動(dòng)的元素總是找理它最近的父級(jí)元素對(duì)齊。但是不會(huì)超出內(nèi)邊距的范圍。
浮動(dòng)的元素排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。
由2可以推斷出，一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。 元素添加浮動(dòng)后，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少浮動(dòng)根據(jù)元素書(shū)寫(xiě)的位置來(lái)顯示相應(yīng)的浮動(dòng)。
總結(jié)： 浮動(dòng) --->
浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示。
float 浮 漏 特
?。?加了浮動(dòng)的元素盒子是浮起來(lái)的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏： 加了浮動(dòng)的盒子，不占位置的，它浮起來(lái)了，它原來(lái)的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： 特別注意，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用， 其次 特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多，但是經(jīng)過(guò)合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁(yè)時(shí)，要想使頁(yè)面結(jié)構(gòu)清晰、有條理，也需要對(duì)網(wǎng)頁(yè)進(jìn)行“排版”。
“版心”(可視區(qū)) 是指網(wǎng)頁(yè)中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見(jiàn)的寬度值為960px、980px、1000px、1200px等。
布局流程
為了提高網(wǎng)頁(yè)制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：
1、確定頁(yè)面的版心（可視區(qū)）。
2、分析頁(yè)面中的行模塊，以及每個(gè)行模塊中的列模塊。
3、制作HTML結(jié)構(gòu) 。
4、CSS初始化，然后開(kāi)始運(yùn)用盒子模型的原理，通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。
一列固定寬度且居中
人生就像乘坐北京地鐵一號(hào)線：
途經(jīng)國(guó)貿(mào)，羨慕繁華；
途經(jīng)天安門(mén)，幻想權(quán)力；
途經(jīng)金融街，夢(mèng)想發(fā)財(cái)；
經(jīng)過(guò)公主墳，遙想華麗家族；
經(jīng)過(guò)玉泉路，依然雄心勃勃…
這時(shí)，有個(gè)聲音飄然入耳:乘客你好,八寶山馬上就要到了！
頓時(shí)醒悟：人生苦短，有始有終。
好比我們的浮動(dòng)，有浮動(dòng)開(kāi)始，則就應(yīng)該有浮動(dòng)結(jié)束。
為什么要清除浮動(dòng)
我們前面說(shuō)過(guò)，浮動(dòng)本質(zhì)是用來(lái)做一些文字混排效果的，但是被我們拿來(lái)做布局用，則會(huì)有很多的問(wèn)題出現(xiàn)， 但是，你不能說(shuō)浮動(dòng)不好
。
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問(wèn)題，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響
如果浮動(dòng)一開(kāi)始就是一個(gè)美麗的錯(cuò)誤，那么請(qǐng)用正確的方法挽救它。
清除浮動(dòng)本質(zhì)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。
清除浮動(dòng)的方法
其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來(lái)影響其他元素。
在CSS中，clear屬性用于清除浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器{clear:屬性值;}
額外標(biāo)簽法
是W3C推薦的做法是通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。
優(yōu)點(diǎn)： 通俗易懂，書(shū)寫(xiě)方便
缺點(diǎn)： 添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差。 我只能說(shuō)，w3c你推薦的方法我不接受，你不值得擁有。。。
父級(jí)添加overflow屬性方法
可以通過(guò)觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面講解）
可以給父級(jí)添加： overflow為 hidden|auto|scroll 都可以實(shí)現(xiàn)。
優(yōu)點(diǎn)： 代碼簡(jiǎn)潔
缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。
使用after偽元素清除浮動(dòng)
:after 方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
?
.clearfix {*zoom: 1;} /* IE6、7 專(zhuān)有 */
優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語(yǔ)義化正確
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
注意： content:"." 里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox 7.0前的版本會(huì)有生成空格。
使用before和after雙偽元素清除浮動(dòng)
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)： 代碼更簡(jiǎn)潔
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
