浮動與定位，浮動定位(html5技術)

　　浮動與定位在網頁設計中應用得很廣泛，是兩種主要佈局方式的實現方法。

　　我們知道，網頁上一般來說，塊標籤是自上而下的一塊塊堆疊，行內標籤則在一行內從左到右依次並排，如果所有網頁的都這樣機械的排列著，也太單調了，所以有沒有一個東西讓標籤內容脫離這種文件流呢，首先就可以考慮float。

　　float，使某元素浮動起來，可以把元素移到，比如瀏覽器邊沿的左邊或右邊，看上去它們就像粘在邊沿上一樣，它下邊的文字則會充斥在它的一邊或者下面，如下例

<!DOCTYPE html><html><head><title>float test</title

><style type="text/css">/*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{width:300px; margin:0 auto; border:2px solid #30c13a;} .wrap .fl{ width:100px;float:left; background-color:#8cceff;}</style></head><body><div class="wrap"><pclass="fl">

The Macintosh Classic is a personal </p><p> It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE. </p></div></body></html>View Code

　　效果

　　float有三個值：left、right、none，向左、向右或者不使用浮動。上邊是向左浮動（藍色背景），跟在它後邊p標籤中的文字沒給任何樣式，本來兩個p標籤中的文字塊會一上一下分段堆疊，加了float left後，下邊p標籤中的文字，就環繞在它周圍，包括下邊和右邊。

　　一般我們在設定浮動時會給浮動塊一個寬度，這樣才能顯示浮動的意義，如果任由其充滿在其父元素中一整行就不需要浮動了，但是多的文字又會跑到浮動塊的下邊去，所以讓兩個塊分開來更合理，可以對右邊環繞的文字塊加一個margin（或者再加一個padding），這個左邊距至少要是浮動塊的盒模型寬度（注意不是左邊元素本身的width屬性值，還包括了它的padding、border和margin），通常比這個寬度略大，比如這裡可以給右邊那個文字塊設定：margin-left:110px; ，將兩個塊隔離開。

　　因為浮動脫離了html文件流，所以有時候瀏覽器在計算塊的寬高時，沒有將浮動的模組算在內，比如下邊這樣

<!DOCTYPE html><html><head><title>float test</title><style type="text/css">/*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{width:300px; margin:0 auto; border:2px solid #30c13a;} .wrap .fl{ width:100px;float:left; background-color:#8cceff;}</style></head><body><div class="wrap"><pclass="main"> It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE. </p><p class="fl">The Macintosh Classic is a personal </p></div></body></html>View Code

　　效果

　　就是將上例中的浮動模組和右邊的文字模組調換了位置，去掉了右邊文字塊的margin，外圍的類為wrap的div明明將這個浮動塊包在裡邊，但是網頁上的border邊框可以看出，高度的計算沒有把它放在裡邊，浮動也跑到外邊去了，因此浮動還要注意的是：如果要讓B圍繞A，且A浮動，在html程式碼的組織上，要把A模組的程式碼放在B模組之前，對於左或右均是如此。

　　浮動可能產生的問題：

　　1.元素的border穿浮動塊而過

　　程式碼和效果

<!DOCTYPE html><html><head><title>float test</title><style type="text/css">/*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{width:400px; height:100px; margin:0 auto; border:2px solid #3c3c3c;} .wrap .banner{ font-size:120%; font-weight:normal;} .wrap .banner{ margin:5px; border: 2px dashed #30c13a;/*overflow:hidden;*/} .wrap .fr{ float:right; width:100px; color:#fff; margin-left:10px;margin-right:10px; background-color:#c19132;}</style></head><body><div class="wrap"><div class="fr"><ul><li>Apple</li><li>Google</li><li>Microsoft</li></ul></div><h1class="banner"> Welcome To CSS World </h1></div></body></html>View Code

　　效果

　　新增overflow後

　　右上角，標題的邊框穿過了浮動的列表，為消除這種因背景色或邊框在浮動元素的下方出現的情形，需要使用overflow，我們知道overflow是文字溢位時採取的措施，比如hidden隱藏多出寬高範圍的文字。具體說是，在.wrap .banner{...}中新增overflow:hidden即可，IE6可能還要加一個zoom:1;（這是一個神奇的IE屬性，解決了好多IE顯示問題~）

　　2. 在浮動元素周圍環繞，但不需要

　　程式碼和效果

<!DOCTYPE html><html><head><title>float test</title><style type="text/css">/*reset*/ body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;} .wrap{width:400px; height:136px; margin:0 auto; border:2px solid #3c3c3c;} .wrap .left-sidebar{width:100px; background-color:#e0c898; text-align:center; float:left;} .wrap .left-sidebar ul{list-style-type:none;} .wrap .main{ margin-left:110px;} .wrap .copyright{background-color: #000; color:#fff; padding:5px; text-align: center;}</style></head><body><div class="wrap"><div class="left-sidebar"><ul><li>

浮動與定位，浮動定位(html5技術)

浮動與定位，浮動定位(html5技術)

談談前端中的浮動，絕對定位，相對定位

IE5、6下絕對定位元素和浮動元素並列，絕對定位元素消失不見解決方案

jquery控制導航定位，浮動窗跟隨網頁變化

css浮動布局，浮動原理，清除(閉合)浮動方法

css的三種定位relative,absolate, fixed,相對定位，絕對定位，固定定位，巢狀定位

css相對定位，絕對定位，static定位

h5--------相對定位，絕對定位

絕對定位，相對定位有一個比較重要的知識點

錨點定位，jquery定位到頁面指定位置

css盒子絕對定位，相對定位，固定定位

CSS position 屬性絕對定位與相對定位，以及浮動

CSS position 屬性：絕對定位與相對定位，以及浮動

CSS | 走進position與float定位浮動和重疊，重新定義你的佈局（一）

第五天-css基礎（浮動網頁布局定位方式，清除定位）

css的浮動與定位

css元素定位和浮動、元素的隱藏與顯示

CSS浮動，定位，流體式佈局簡單瞭解

CSS ——浮動與定位元素

CSS浮動與定位（二）

浮動與定位，浮動定位(html5技術)

相關推薦