1. 程式人生 > >詳解CSS float屬性

詳解CSS float屬性

CSS中的float屬性是一個頻繁用到的屬性,對於初學者來說,如果沒有理解好浮動的意義和表現出來的特性,在使用的使用很容易陷入困惑,雲裡霧裡,搞不清楚狀態。本文將從最基本的知識開始說起,談談關於浮動的應用,出現的問題和解決方案。

基礎知識

float,顧名思義就是浮動,設定了float屬性的元素會根據屬性值向左或向右浮動,我們稱設定了float屬性的元素為浮動元素。
浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。舉例說明如下:
Html程式碼:

1
2
3
4
5
6
<div class="box">
        <span class
="float-ele">
浮動元素 </span> 普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流普通文件流 </div>

CSS程式碼:

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }
.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px
; text-align: center; }

效果圖
float基本效果

由效果圖可以看出,span元素周圍的文字會圍繞著span元素,而設定了float屬性的span元素變成了一個塊級元素的感覺,可以設定width和height屬性。這是設定了float屬性後的效果,關於float的詳細細節,我們接下來詳細講解。

float的詳細細節

在說明float帶來的詳細細節之前,我們首先要了解一個概念。
包含塊:浮動元素的包含塊就是離浮動元素最近的塊級祖先元素,前面敘述的例子中,div.box就是span元素的包含塊。

瞭解完包含塊的概念之後,首先要說明的浮動元素的第一個特性:不管一個元素是行內元素還是塊級元素,如果被設定了浮動,那浮動元素會生成一個塊級框,可以設定它的width和height,因此float常常用於製作橫向配列的選單,可以設定大小並且橫向排列。

浮動元素的展示在不同情況下會有不同的規則,下面我們來一一說明這些規則。
1.浮動元素在浮動的時候,其margin不會超過包含塊的padding
這一點很簡單,浮動元素的浮動位置不能超過包含塊的內邊界
HTML程式碼

1
2
3
4
5
<div class="box">
        <span class="rule1">
            浮動元素
        </span>
    </div>

CSS程式碼

1
2
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
        .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果圖
float規則一


這個例子中,box的padding是10px,浮動元素的margin是10px,合起來為20px,即浮動元素不會超過包含塊的padding。
PS:如果想要元素超出,可以設定margin屬性

2.如果有多個浮動元素,後面的浮動元素的margin不會超過前面浮動元素的margin
簡單說就是如果有多個浮動元素,浮動元素會按順序排下來而不會發生重疊的現象。
修改前面例子中的HTML程式碼如下:

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
        <span class="rule1">
            浮動元素1
        </span>
        <span class="rule1">
            浮動元素2
        </span>
        <span class="rule1">
            浮動元素3
        </span>
    </div>

效果圖如下:
float規則二

如圖所示,浮動元素會一個一個排序下來而不會發生重疊現象。

3.如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
什麼意思呢,我們要分兩種情況來看。
(1)包含塊的寬度大於兩個浮動元素的寬度總和,舉例如下:
HTML程式碼:

1
2
3
4
5
6
7
8
<div class="box">
        <span class="rule1">
            浮動元素1
        </span>
        <span class="rule2">
            浮動元素2
        </span>
    </div>

CSS程式碼

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果圖
float規則三情況1

這種情況很簡單:包含塊元素的寬度足夠大,兩個元素一個向左浮動,一個向右浮動,井水不犯河水。

(2)包含塊的寬度小於兩個浮動元素的寬度總和
修改浮動元素的寬度為300px,CSS程式碼如下:

1
2
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

效果圖
float規則三情況2

如果所示,如果包含塊寬度不夠高,後面的浮動元素將會向下浮動,其頂端是前面浮動元素的底端。

4.浮動元素頂端不會超過包含塊的內邊界底端,如果有多個浮動元素,下一個浮動元素的頂端不會超過上一個浮動元素的底端
這條規則簡單說就是如果有多個浮動元素,後面的元素高度不會超過前面的元素,並且不會超過包含塊。舉例如下:
HTML程式碼:

1
2
3
4
5
6
7
8
9
10
<div class="box">
        <p>在浮動元素之前在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,</p>
        <p class="rule1">
            浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1
        </p>
        <p>在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後</p>
        <p class="rule1">
            浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2
        </p>
    </div>

CSS程式碼

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; }
p { margin-top: 20px; margin-bottom: 20px; }

效果圖
float規則四


如圖所示,兩個浮動元素,後面的浮動元素不會超過前面的浮動元素

5.如果有非浮動元素和浮動元素同時存在,並且非浮動元素在前,則浮動元素不會不會高於非浮動元素
這條規則也是顯而易見的,在第4條規則中的例子,浮動元素有一個非浮動元素p,而浮動元素沒有超過它。

6.浮動元素會盡可能地向頂端對齊、向左或向右對齊
在滿足其他規則下,浮動元素會盡量向頂端對齊、向左或向右對齊,在第4條規則中的例子,浮動元素會盡可能靠近不浮動的p元素,左側對齊
float規則六

float特殊情況

前面討論了float需要遵守的一些規則,這些規則都是在比較常見的場景下展示的結果。下面我們來討論一些不常見的情況。

浮動元素的延伸性

在說浮動元素的延伸性之前,我們首先來考慮一個比較特殊的例子。
我們將span元素放在p元素內,並將其高度設定成高於p元素並且左浮動,這個例子的關鍵在浮動元素高度高於父元素。
HTML程式碼

1
2
3
4
5
6
7
<p>
        在浮動元素之前在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,
        <span class="high-float">
            浮動元素比父級元素高
        </span>
    </p>
    <p>在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後在浮動元素之後</p>

CSS程式碼

1
2
p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; }
.high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

效果圖
浮動元素高度大於父級元素

在這個例子中,浮動元素高度高於父元素,可以看到浮動元素超出了父元素的底端。
這種情況要怎麼解決呢,只要將父元素也設定成浮動即可,我們將第一個p元素設定成左浮動,效果如下
浮動元素延伸性

將父元素p設定成float:left後,浮動元素就會被包含到父元素裡面,我們將這個特性成為浮動元素的延伸性。
浮動元素的延伸性是什麼呢,我們可以將其理解為元素被設定成浮動後,該元素會進行延伸進而包含其所有浮動的子元素

浮動元素超出父級元素的padding

在前面提到的第一條規則:浮動元素的外邊界不會超過父級元素的內邊界。大部分情況下,我們見到的場景都是符合的。但是有一些特殊情況。
(1)負margin
我們將浮動元素的margin-left設定成負數。
HTML程式碼:

1
2
3
4
5
6
<p>
    在浮動元素之前在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,
    <span class="minus-margin">
        負margin-left
    </span>
</p>

CSS程式碼:

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; }
.minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

效果圖
負maring的浮動元素

將margin-left設定成負數之後,浮動的子元素明顯超出了父元素的內邊界,這難道不是違反了第一條規則嗎?
但仔細想想,這其實是合理的,因為預設情況下marign-left就是0,所以不會超出父元素的內邊界,但是將其設定成負數之後,就相當於浮動元素覆蓋了自己的內邊界一樣。
我們在從數學的角度來看看這個問題,這個例子中:
父元素的margin-left:50px,padding和border預設為0,即內邊界所在距離瀏覽器左側的位置為50px。
浮動的子元素預設情況下距離瀏覽器左側的畫素應該為50px,但是將其設定成margin-left:20px後,瀏覽器會進行計算:
50px+(-20px)margin+0border+0padding=30px。距離瀏覽器左側更近,所以超出了父元素。

(2)浮動元素寬度大於父級元素寬度
如果我們將浮動元素的寬度設定大於父級元素,效果會如何呢?
元素左浮動,width大於父級元素
HTML程式碼

1
2
3
4
5
6
<p>
    在浮動元素之前在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,
    <span class="big-width">
        width大於父級元素
    </span>
</p>

CSS程式碼

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

效果圖
大width的浮動元素

將浮動元素左浮動,並且寬度超出父級元素時,由於浮動元素寬度較大,它會超過父級元素的右內邊界
如果將其設定成右浮動,情況又會怎麼樣呢?
大width的浮動元素


可以看到,設定成右浮動後,會超出父級元素的左內邊界。

重疊問題

重疊問題是指兩個元素再同一個位置,會出現上下重疊的問題。浮動元素如果和普通文件流發生重疊會怎麼樣呢?
首先浮動元素要怎麼樣才會發生重疊呢,設定其margin-top為負數即可。我們看看例子:
HTML程式碼:

1
2
3
4
5
6
7
8
<p>
        <span>
            在浮動元素之前在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前,在浮動元素之前。
        </span>
        <span class="overlay">
            浮動元素重疊
        </span>
    </p>

CSS程式碼

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果圖如下:
浮動元素的重疊問題


如果浮動元素不設定負margin時,是這樣的
浮動元素的重疊問題 浮動元素的重疊問題

在這個例子中,可以看到p中正常流元素span的內容會顯示在浮動元素上面。
我們給設定span設定背景圖片試試,效果如下:
浮動元素的重疊問題:有背景圖

元素設定背景後,重疊的部分還是會顯示背景

如果是span標籤換成div標籤會怎麼樣呢?
HTML程式碼:

            
           

相關推薦

CSS float屬性

CSS中的float屬性是一個頻繁用到的屬性,對於初學者來說,如果沒有理解好浮動的意義和表現出來的特性,在使用的使用很容易陷入困惑,雲裡霧裡,搞不清楚狀態。本文將從最基本的知識開始說起,談談關於浮動的應用,出現的問題和解決方案。 基礎知識 float,顧名思義就是浮動,設定了float屬性的元素會根據

CSS position屬性

基礎知識 left 如果 表示 sta 很多 有一個 clas 應用 詳解CSS position屬性 閱讀目錄 基礎知識 絕對定位 固定定位 相對定位 應用舉例 總結 position是CSS中非常重要的一個屬性,通過position屬性,我們可以讓元素相

css float屬性

rev ger 由於 src 水平 left 填充 圖像 eve 定義和用法 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。如果浮動非替換元

css中的display屬性(行內元素和塊級元素)

display屬性 首先,所有主流瀏覽器都支援 display 屬性。其次,我們都知道display 屬性規定元素應該生成的框的型別。預設值:inline 我們常用的display屬性值有: inline block inline-block none 把 display

CSS 3 漸變屬性

CSS 3中的漸變屬性的支援度具體是:IE10、FF3.6+、Safari4.0+、Chrome、Opera11.1+、iOS3.2+、Opera Mobile11.1、Android,也就是說除了IE10以外其它的瀏覽器已經支援 CSS3 的漸變屬性了(雖然有些還在使用私有屬性)。【Opera暫不支援徑

CSS中clear屬性both、left、right值的含義

clear的值有四個 none:允許兩邊都可以有浮動物件; both:不允許有浮動物件; left:不允許左邊有浮動物件; right:不允許右邊有浮動物件。 老實說,我沒真正理解字面上的意思,因為這幾段話是有歧義的,例如clear:right的解釋是“不允許右邊有浮動物件

CSS display:inline-block的應用(轉)

點擊 header 使用 -a title blank 擁有 美妝 底部 閱讀目錄 基礎知識 inline-block的問題 inline-block的應用 總結 本文詳細描述了display:inline-block的基礎知識,產生的問題和解決方法以及其常見的應

vue計算屬性

strong 通過 bar spa 兩種 多個 用法 count 效果 一、什麽是計算屬性 模板內的表達式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如: <div id="example"> {{ mes

css媒體查詢

rdp 多媒體類 str 表達式 來講 其中 使用 round block 簡介 媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮後變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用於修飾css何時起作用

CSS中的幾種長度px、em、pt

說說css的幾種距離吧,大致有px、em、pt、pc、in、mm、cm、ex八種,其中最常見到的是px,我還見到過的有ex和mm、cm,當然後兩個在當年見的更多。 其實px,我們最熟悉,而在電腦上也應用最多,因為顯示器的解析度就是...px*....px,我們知道解析度的話是不是對於瀏覽器最大時

css外邊距摺疊(margin collapsing)

外邊距摺疊指的是毗鄰的兩個或多個外邊距 (margin) 會合併成一個外邊距,本文詳細的介紹了一下css外邊距摺疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下 前文 這是的一個經典的老問題,因為之前剛好有讀者朋友問到,順便整理一下。 從一個簡單例子說起 先看一個簡單示例: `<

WEB前端之網頁設計⑤----最新最全/CSS層疊樣式表

WEB前端之網頁設計⑤—-最新最全詳解/CSS層疊樣式表 簡介:CSS層疊樣式表可以簡化網頁的格式程式碼,外部樣式表還會被瀏覽器儲存在快取里加速了下載顯示的速度,也減少了需要上傳的程式碼數量,總而言是非常的實用。 一、程式碼塊: <!doctyp

CSS的Flex佈局

本文由雲+社群發表 Flex是Flexible Box 的縮寫,意為"彈性佈局",是CSS3的一種佈局模式。通過Flex佈局,可以很優雅地解決很多CSS佈局的問題。下面會分別介紹容器的6個屬性和專案的6個屬性。每個屬性會附上效果圖,具體實現程式碼會以github路徑形式更新於此。 1.

CSS的Flex布局

sel git cfq 空間大小 容器 作用 css3 失效 ask 本文由雲+社區發表 Flex是Flexible Box 的縮寫,意為"彈性布局",是CSS3的一種布局模式。通過Flex布局,可以很優雅地解決很多CSS布局的問題。下面會分別介紹容器的6個屬性和項目的

Web—12-CSS的相對定位和絕對定位

CSS的相對定位和絕對定位通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定一個距離左邊距偏移100px的宣告:left:100px

CSS中:nth-child的用法

下面我將用幾個典型的例項來給大家講解:nth-child的實際用途: Tips:還用低版本的IE瀏覽器的哥們請繞過! :nth-child(2)選取第幾個標籤,“2可以是你想要的數字” .demo01 li:nth-child(2){background:#090}  :nth-c

Html+CssCss選擇器,優先順序與匹配原理

給一個p標籤增加一個類(class),可是執行後該class中的有些屬性並沒有起作用。通過Firebug檢視,發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選擇器的優先順序問題,這裡就CSS選擇器的優先順序問題做了一些總結。 選擇器種類 嚴格來講,選擇器的種類可以分為三種:標籤名選擇器、類選擇器

css樣式處理的優先順序

想要對一個標籤處理它的樣式,可以用 class=“” 的方式來定義它的類,然後在類中處理他的樣式 例如: <style> .box{width:100px;height:100px;background:#0f0} </style>

CSS 類選擇器——CSS 多類選擇器

CSS 類選擇器 類選擇器允許以一種獨立於文件元素的方式來指定樣式。 該選擇器可以單獨使用,也可以與其他元素結合使用。 提示:只有適當地標記文件後,才能使用這些選擇器,所以使用這兩種選擇器通常需要先做一些構想和計劃。 要應用樣式而不考慮具體設計的元素,最常用的方法就是使用類選擇器。 修改 HTML 程式碼

spring事務屬性

Spring宣告式事務讓我們從複雜的事務處理中得到解脫。使得我們再也無需要去處理獲得連線、關閉連線、事務提交和回滾等這些操作。再也無需要我們在與事務相關的方法中處理大量的try…catch…finally程式碼。 我們在使用Spring宣告式事務時,有一個非常重要的概念就是事