「Web前端開發(fā)進階篇」CSS定位和浮動

一篇文章我們把「Web前端開發(fā)進階篇」CSS框模型講解完了，接著我們來講解下一篇文章，關于CSS定位的內(nèi)容知識，小伙伴們跟上我的節(jié)奏，動起來，Let's go！

【引言】

CSS定位思想很簡單，就是讓你定義的元素框相對于其正常位置應該出現(xiàn)的位置，相對于父元素、另一個元素甚至是瀏覽器窗口的位置。浮動不是完全定位，不過，它也不是正常流布局。在我們切頁面的過程中，定位和浮動是經(jīng)常用，用不好，就會出現(xiàn)頁面在不同瀏覽器的兼容性問題。我會在下面的文章中詳細說明。

CSS定位

CSS定位機制

CSS有三種定位機制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設置行高可以增加這個框的高度。

CSS position屬性

通過position屬性我們可以選擇4中不同類型的定位。

1、position：static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

2、position：relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

3、position：absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

4、position：fixed

元素框的表現(xiàn)類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

CSS定位屬性

CSS 定位屬性允許你對元素進行定位。

position：把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。

top：定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right：定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom：定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left：定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow：設置當元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。

clip：設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。

vertical-align：設置元素的垂直對齊方式。

z-index：設置元素的堆疊順序。

了解了這些屬性后，下面我們詳細的說說相對定位和絕對定位。

CSS相對定位

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

如果將 top 設置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {
 position: relative;
 left: 30px;
 top: 20px;
}

如下圖所示：

相對定位

注意，在使用相對定位時，無論是否進行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導致它覆蓋其它框。

CSS絕對定位

絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_relative {
 position: absolute;
 left: 30px;
 top: 20px;
}

如下圖所示：

絕對定位

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

對于定位的主要問題是要記住每種定位的意義。所以，現(xiàn)在讓我們復習一下學過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。

注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

CSS浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

右浮動

再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

左浮動

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“擋住”：

左浮動

CSS float 屬性

通過 float 屬性實現(xiàn)元素的浮動。因此，我們可以創(chuàng)建浮動框可以使文本圍繞圖像：

文本圍繞圖像

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

為了實現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

清除浮動

這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這種情況下，出現(xiàn)了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：

不幸的是出現(xiàn)了一個新的問題，由于沒有現(xiàn)有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

.clear {
 clear: both;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

這樣可以實現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。

不過我們還有另一種辦法，那就是對容器 div 進行浮動：

.news {
 background-color: gray;
 border: solid 1px black;
 float: left;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當?shù)挠幸饬x的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。

CSS定位今天就講解到這里了，下一篇講解CSS選擇器，希望大家不要放棄學習哦！

PS：

本文為‘Web前端進階指南’原創(chuàng)，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！

天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

（1）float使用語法

css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：

float:none; （不使用浮動）

float:left; （靠左浮動）

float:right; （靠右浮動）

（2）float使用案例

我們通過案例來實際演練一下float元素的使用技巧。

1、float:left的使用練習

我們這里創(chuàng)建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網(wǎng)頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網(wǎng)頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。

這里我們創(chuàng)建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網(wǎng)頁代碼以及顯示效果就如下圖所示：

網(wǎng)頁中的顯示效果：

2、float:right的使用練習

float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網(wǎng)頁中可以看到圖片已經(jīng)浮動到網(wǎng)頁的右側(cè)中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現(xiàn)什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。

每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

Web前端開發(fā)-CSS入門干貨01 、Web前端開發(fā)-CSS入門干貨02 、Web前端開發(fā)-CSS布局-盒子模型入門干貨介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個重要應用浮動和定位。

根據(jù)元素浮動、定位的特性可以將CSS布局分為三種：標準流、浮動流、定位流；

其中標準流是利用塊級元素獨占一行、自上而下，行內(nèi)元素一行顯示、遇到阻礙自動換行、自左向右的布局方式。

1.浮動

（1）什么是浮動

元素脫離原先位置，不再占據(jù)空間，相對于未浮動元素類似漂浮在其上面；

浮動元素具有了行內(nèi)塊元素特性，并實現(xiàn)貼邊布局。這里的邊可以是父級元素的邊也可以是同樣浮動的兄弟級元素的邊。

（2）浮動解決的問題

改變塊級元素默認的垂直布局方式，改為橫向布局。

行內(nèi)塊樣式（display: inline-block;）也可以改變塊級元素的布局方式，但是不能靈活解決兩個塊級元素之間縫隙、不能靈活解決多個塊級元素分別實現(xiàn)左對齊、右對齊等問題。當然如果想要塊級元素隨意放置，那就要用到定位了。

（3）浮動的語法

選擇器 {float:none/left/right}，對選擇器選擇的元素實現(xiàn)不浮動、左浮動、右浮動。

（4）浮動的典型應用

通過不浮動的塊級元素+嵌套在其內(nèi)內(nèi)的浮動元素，實現(xiàn)頁面各種布局。

塊級元素實現(xiàn)縱向布局，浮動的元素實現(xiàn)橫向布局。

（5）因為浮動引出的問題

浮動元素通常嵌套在一個不浮動的元素內(nèi)，進行配合使用；所有浮動元素的高以及外邊距之和不能超過那個不浮動元素，否則出現(xiàn)重疊。

那么當嵌套的浮動的子元素數(shù)量不確定時，那么父級元素的高度就不能確定。為了解決這個問題，提出來不設置父級元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動的子元素具有脫離原先位置、不占空間的特點，那么父元素的高度只會是0，在父元素之后的兄弟元素就會與上一個父元素內(nèi)浮動元素發(fā)生重疊。為了解決這個問題，提出來清除浮動。

（6）清除浮動

1）語法

選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動、左浮動、左右浮動。

2）清除浮動方式

a）額外標簽法

添加一個與浮動元素同級的空標簽（塊級），并為其設置清除浮動的樣式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父級元素添加overflow樣式（常用）

語法：選擇器 {overflow:hidden}

c）父級元素添加after偽元素樣式（常用）

樣式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

d）父級元素添加雙偽元素（常用）

樣式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

2.定位

（1）什么是定位

將html元素放置在任意指定的位置，提高頁面布局的靈活性。

（2）定位解決的問題

比如頁面?zhèn)冗吂潭ǖ墓ぞ邫凇⑤啿D

（3）定位的實現(xiàn)方式

利用定位模式+邊偏移，在樣式中設定定位模式，然后設定元素盒子模型邊偏移。

1）邊偏移

包括top、right、bottom、left四個分項。

2）定位模式分類

a）靜態(tài)定位（static）：元素無偏移，也即元素本身的默認布局方式。

語法：選擇器 {position:static;}

b）相對定位（relative）：相對元素自身原先位置設置偏移。（常用）

語法：選擇器 {position:relative;}

需要注意的是設置了相對定位的元素仍舊實際占據(jù)位置

c）絕對定位（absolute）：相對于元素的擁有定位的父級（或者更高級）元素進行定位。（常用）

語法：選擇器 {position:absolute;}

需要注意的（1）設置的絕對定位的元素的參考依據(jù)是有定位模式的父級或者更高級元素的。

（2）設置了絕對定位的元素會有浮動效果，即不再占有位置。

d）固定定位（fixed）：相對于瀏覽器可視區(qū)域，在某個位置固定不動。（常用）

語法：選擇器 {position:fixed;}

需要注意的（1）設置的固定定位的元素的參考依據(jù)瀏覽器當前可視窗口。

（2）設置了固定定位的元素會有浮動效果，即不再占有位置。

e）粘性定位（sticky）：被認為是相對定位和固定定位的混合。元素在跨越特定偏移前為相對定位，之后為固定定位。

語法：選擇器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要設置邊偏移（任何邊都可行），否則其功能和相對定位相同。

（2）設置的粘性定位的元素的參考依據(jù)瀏覽器當前可視窗口。

（3）設置的粘性定位的元素仍舊實際占據(jù)位置

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網(wǎng)頁制作
下一篇：CSS3動畫提示層效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商