国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

浮動的一些探究

LucasTwilight / 2688人閱讀

摘要：浮動元素會從文檔的正常流簡稱文檔流中脫離，但仍會影響布局。五清除浮動和中對工作是這樣描述的增加元素的上外邊距，使之最后落在浮動元素的下面。清除區域時在元素的上外邊距增加的額外間隔，不允許任何浮動元素進入這個范圍內。

內容預覽

包含塊

浮動元素的特性

浮動元素的擺放規則

浮動元素的幾種行為

清除浮動

一、包含塊

所有元素的布局都是依賴于包含塊的。

舉個例子來說

div.child的包含塊就是div.parent，也就是說div.child位置的擺放是依賴于div.parent。div.parent的包含塊就是body。

一句話總結：浮動元素的包含塊定義為最近的塊級祖先元素。

那么body的包含塊html的包含塊是誰呢？為了方便閱讀，這個問題將在下次的文章中介紹。

二、浮動元素的特性

為了便于閱讀，請先了解行內元素的相關概念以及外邊距合并的原理。

浮動元素會從文檔的正常流(簡稱文檔流）中脫離，但仍會影響布局。
正常流（文檔流）：這是指西方語言文本從左到右，從上到下顯示。簡單來說就是一種自上而下自左而右到一種閱讀方式

浮動元素的外邊距不會合并

如果確實要浮動一個非替換元素，則必須為該元素聲明一個width，否則根據CSS規范，元素寬度趨于0

舉個例子：

現在對代碼進行修改，給div加個浮動

三、浮動元素的擺放規則

1）浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界。

這里的左（或右）是指浮動方向。

2）浮動元素的左（或右）外邊界必須是源文檔中之前出現的左浮動（或右浮動）元素的左（右）邊界，除非后出現浮動元素的頂端在先出現浮動元素的底端下面。

該規則主要針對多個浮動元素，并且防止它們發生覆蓋。

3）左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。這條規則比較繞，個人理解就是多個子元素一起浮動時，在有限的寬度里不會發生重疊。

123總結：一般情況下，浮動元素不會發生重疊或覆蓋，水平方向上也不會超出父元素邊界。

4）一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合并外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。

內頂端在這里的意思就是content的頂部。也就是下圖箭頭所指藍色區域的頂端。

那么這條規則的第一句話意思就是浮動元素的頂端不會比父元素的content區頂端高。

第二句話不太好理解，先看段代碼。




    
First

    
Float Div

    
Last Div

效果是這樣的。


第二句話的意思個人理解為：元素浮動后外邊距不再合并，而LastDiv依然處在正常流中（會與First發生合并）,所以出現FloatDiv低于LastDiv現象。

5）浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。

這條規則比較好理解。注意這里的浮動元素和塊級元素都是同級別的。

6）如果源文檔中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

一張圖理解該規則


紅色區域是浮動元素所在行的行框

456總結：這三條規則以遞進的方式來描述浮動元素在垂直向上方向的位置擺放問題。分別介紹浮動元素與包含塊的位置關系，浮動元素與同級元素的位置關系以及浮動元素與其所在行框的位置關系。

四、浮動元素的幾種行為 1. 高度過高

高度超出包含塊的高度時會發生什么？常說的高度塌陷就是這里產生的。

在前面的規則中并沒有對該情況進行處理。

CSS2.1 中對此行為進行了說明，浮動元素會延伸，從而包含其所有后代浮動元素。所以通過將父元素設為浮動元素，就可以把浮動元素包含在其父元素內。




    

        

        The content after float element.The content after float element.The content after float element.The content after float element.The content after float element.The content after float element.

2. 負外邊距

浮動元素的規則對浮動元素在水平以及垂直朝上方向的位置擺放進行了嚴格限制。然而，當margin設為負值時，確實超出了包含塊的邊界。

稍加修改樣式

.child{width:100px;height:300px;background:red;float:left;margin:-50px 0 0 -50px;}
body{padding:50px;}

3. 浮動元素過寬

浮動元素過寬時，此時會哪邊會超出包含塊邊界，則是由浮動方向決定了。因為規則1里說的浮動元素的左（或右）邊界（浮動方向）不會超過包含塊的左（或右）邊界。

a.向左浮動時

b.向右浮動時

4.浮動元素與其他元素的重疊

a）行內元素

行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素“之上”顯示。

b）塊級元素

塊框與一個浮動元素重疊時，其邊框和背景都在該浮動元素“之下”顯示，而內容在浮動元素“之上”顯示。




    

        

        This is inline element
        
This is block element

一圖勝千言。

五、清除浮動

CSS1和CSS2中對clear工作是這樣描述的：增加元素的上外邊距，使之最后落在浮動元素的下面。這也就是說清除元素的上外邊距可能會調整。

CSS2.1中，引進了一個清除區域（clearance）。清除區域時在元素的上外邊距增加的額外間隔，不允許任何浮動元素進入這個范圍內。這意味著在給元素設置clear時，它的外邊距并不改變。之所以發生下移是這個清除區域造成的。

這是未設置clear屬性時的效果。

給sec設置clear屬性時，是這樣的。紅色區域是清除區域。

 div.sec{background-color:#3fa;width:300px;clear:left;}

關于清除區域大小：個人理解這個區域的大小是不固定的，這個大小是由清除元素前面所要清除的浮動元素的大小來決定的。并且浮動元素和清除元素的方向是要保持一致的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115027.html

相關文章

  • BFC的一些探究

    摘要：它是用于決定盒子的布局及浮動相互影響范圍的一個區域。小白反思如果世界的運行都有自我運行的一套機制，那么的世界必然有自己的一套規則。外邊距合并當時在回答外邊距的問題時，總結出了合并的一條規則必須相鄰。 最初的夢 了解BFC后，能夠更深入的明白外邊距合并原理。了解BFC后，能夠更深入的明白浮動的行為。了解BFC后，知識就是你的，總不會吃虧對吧？哈哈 之前有兩篇文章《行內元素的一些探索》、《...

    curlyCheng 評論0 收藏0

  • 元素auto寬高的影響因素

    摘要：關于內聯元素之前討論的多是塊級元素，而沒有考慮到內聯元素的情況。但巧合的是，在普通流定位中，內聯元素寬度和高度規則卻和塊級元素絕對定位差不多，都只受內容大小影響。 我們知道，元素在沒有設置寬高的情況下，默認的寬高值都為auto。而這個auto到底是如何讓元素自動擁有寬高的呢，也就是說，元素的寬度和高度到底會受到什么因素的影響？本文將通過一個例子來對這一問題一探究竟，HTML結構和初始c...

    crelaber 評論0 收藏0

  • CSS相關面試題——三欄等高布局

    摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。 題目 最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示 解題 step1 常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動...

    Taste 評論0 收藏0

  • CSS相關面試題——三欄等高布局

    摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。 題目 最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示 解題 step1 常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動...

    fsmStudy 評論0 收藏0

  • CSS盒子模型以及外邊框合并的問題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

    zacklee 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<