與我們合作
我們專注：網站策劃設計、網絡多(duō)媒體傳播、網站優化及網站營銷、品牌策略與設計
主營業(yè)務：網站建設、移動端微信小(xiǎo)程序開(kāi)發、VI設計、網絡運營、雲産品·運維解決方案
有一(yī)個(gè)品牌項目想和我們談談嗎(ma)?
您可以填寫右邊的表格，讓我們了解您的項目需求，這是一(yī)個(gè)良好的開(kāi)始，我們将會(huì)盡快與您取得聯系。當然也歡迎您給我們寫信或是打電(diàn)話，讓我們聽到(dào)您的聲音(yīn)
您也可通(tōng)過下(xià)列途徑與我們取得聯系：
地 址：鹽城(chéng)大豐區黃海路(lù)海運大廈2樓212室
電(diàn) 話：176-5215-1102
手 機(jī)：176-5215-1102
郵 箱：bgr@szqiqiao.com
快速提交您的需求 ↓
蘇州做網站技(jì)術(shù)之網頁CSS+DIV技(jì)術(shù)浮動與定位
發布日期：2014-07-14 21:21:56
浮動與定位
浮動（float）可以說是一(yī)個(gè)設置簡單，使用起來卻很容易産生(shēng)迷惑的CSS屬性。它能(néng)夠對頁面元素的位置産生(shēng)很大的影響。由于利用CSS進行
網頁排版已經逐漸成為(wèi)業(yè)内事(shì)實上(shàng)的标準，Float屬性的利用率也越來越高(gāo)。
定位（Position）也是一(yī)個(gè)非常重要的樣式屬性，有了3種定位方法，我們就(jiù)可以随心所欲的在網頁上(shàng)擺放(fàng)各種标簽了。
首先介紹一(yī)下(xià)浮動（float）
浮動屬性初探
用于标簽周圍内容的環繞
用于網頁整體的排版
設置Float屬性的語法
FLOat屬性隻能(néng)通(tōng)過CSS樣式規則進行設置，可以選擇的值共有一(yī)下(xià)3個(gè)：
Left:标簽向左浮動
right；标簽向右浮動
none：不浮動
浮動屬性的詳解
文檔流
理解浮動屬性，首先要從(cóng)文檔流談起。文檔流分為(wèi)兩種，分别是普通(tōng)文檔流和特殊文檔流。
【普通(tōng)文檔流】
普通(tōng)文檔流的名字有些正統，實際上(shàng)卻很好理解，一(yī)般來說，我們打開(kāi)網頁時，都是上(shàng)方的部分首先顯示出來，然後是中間部分，最好才是是
底部，直到(dào)顯示完成。這樣的順序體現在HTML代碼中就(jiù)是先寫的标簽先顯示，後寫的标簽後顯示。整個(gè)過程好像瀑布的水(shuǐ)從(cóng)上(shàng)流到(dào)下(xià)，因此命
名為(wèi)普通(tōng)文檔流。
【特殊文檔流】
既然有普通(tōng)文檔流，那麽肯定有特殊文檔流，否則不會(huì)在前面增加“普通(tōng)”兩個(gè)字。所謂特殊文檔流，就(jiù)是指那些在頁面被加載浏覽器(qì)的時候
，不按照(zhào)前面所講述的順序，脫離普通(tōng)文檔流而單獨顯示标簽，還(hái)是利用瀑布的例子：瀑布傾瀉而下(xià)的時候，部分水(shuǐ)流碰到(dào)了岩石，導緻下(xià)落
方向與主體不同，他們就(jiù)可以叫做“特殊文檔流”
實際上(shàng)，普通(tōng)文檔流可以理解成網頁的主流，而特殊文檔流則是網頁的支流，主流和支流完全獨立。浏覽器(qì)在顯示一(yī)個(gè)網頁的時候，總是先
顯示主流，在顯示支流。
浏覽器(qì)處理FLOAT标簽的過程
在頁面進行顯示的過程中，浏覽器(qì)一(yī)旦發現有Float标簽，将主要進行如下(xià)幾步操作。
1.在普通(tōng)文檔流中定位：浏覽器(qì)首先在普通(tōng)文檔流中給Float标簽定位，依據它的寬度，預留出一(yī)塊地方供它顯示，好比預留的停車位。
2.脫離普通(tōng)文檔流：浏覽器(qì)将這塊“停車位”從(cóng)普通(tōng)文檔流中脫離出來，不跟著(zhe)主流标簽一(yī)起顯示。
3.浮動過程：“停車位”現在已經處于特殊文檔流之内，根據Float屬性的具體設置，left或者right，浏覽器(qì)将“停車位”水(shuǐ)平浮動到(dào)盡可能(néng)遠(yuǎn)的左邊或者右邊，直到(dào)碰到(dào)别的标簽邊界或者浏覽器(qì)的邊框為(wèi)止。
4.顯示：“停車位”已經妥當，浏覽器(qì)把标簽安放(fàng)到(dào)這個(gè)位置上(shàng)并顯示它。
這個(gè)過程對理解Float屬性很重要。
5.圖片首先在段落中定位，确定寬度、高(gāo)度，預留位置。
6.這塊位置根據Float屬性值right，水(shuǐ)平浮動到(dào)盡可能(néng)遠(yuǎn)的右邊。由于段落右邊沒有其他标簽，所以它碰到(dào)浏覽器(qì)的右邊框後停止。頁面上(shàng)的文字因為(wèi)右邊位置被占，往左移動，形成環繞。
浮動與折顯
如果一(yī)個(gè)Float标簽水(shuǐ)平浮動後，浏覽器(qì)發現沒有足夠的位置安放(fàng)它，浏覽器(qì)會(huì)将這個(gè)“停車位”下(xià)移，直到(dào)發現可以容納的位置為(wèi)止。
Float屬性的影響範圍
Float标簽顯示時，HTML代碼中出現順序在它前面的标簽不會(huì)受到(dào)影響，不會(huì)産生(shēng)環繞，隻有在它後面的标簽内容才會(huì)出現環繞
多(duō)幅圖片與文字的環繞
第1幅圖片應用FLOAT屬性後，其餘的圖片和文字就(jiù)環繞在旁邊，同時後兩幅圖片和内容文字還(hái)是處于一(yī)行的。
無論第2幅圖片還(hái)是第3幅圖片應用FLOAT屬性，第1幅圖片在代碼順序上(shàng)總在他們的前面，因此不受float屬性的影響，依然處于頁面的最左側。
設置了float屬性的圖片要顯示在當前行盡量靠左的位置，由于當前行已經容納不下(xià)（圖片應用FLOAT樣式後寬度變大），最左邊已經被占滿，
隻好另起一(yī)行顯示，而其他内容，包括未應用float屬性的一(yī)副圖片和文字部分則環繞顯示。
