主頁 > 知識(shí)庫 > 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別

詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別

熱門標(biāo)簽:廣州防封電銷機(jī)器人廠家 南通電銷外呼系統(tǒng)軟件 山東電銷機(jī)器人軟件 智能語音電銷機(jī)器人客戶端 成都企業(yè)外呼系統(tǒng) 洛陽防封卡外呼系統(tǒng)廠家 上海400電話辦理到易號(hào)網(wǎng) 常州電話外呼系統(tǒng)招商 申請(qǐng)400電話移動(dòng)

1.float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框,而不論它本身是何種元素。div一個(gè)典型的塊級(jí)元素,會(huì)單獨(dú)占據(jù)一行。

先看看最基本的塊級(jí)元素如何排列的。html代碼,以下樣式都是基于此。

復(fù)制代碼 代碼如下:

div class="boxBg">
        div class="box1">
        框框1
        /div>
        div class="box2">
        框框2
        /div>
        div class="box3">
        框框3
        /div>
/div>

css代碼:

復(fù)制代碼 代碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green
    }

執(zhí)行結(jié)果:

由于div是塊級(jí)元素,所以框會(huì)以縱向形式排列。在實(shí)際操作中往往需要將框橫向排列。有兩種方式可以實(shí)現(xiàn)。第一種將display:inlin-block;

復(fù)制代碼 代碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    display:inline-block
    }

執(zhí)行結(jié)果:

至于中間的縫隙,追溯到本質(zhì)原因是元素之間的空白符引起的,所以在父元素設(shè)置fone-size的大小,可以調(diào)節(jié)空白縫隙的大小。

復(fù)制代碼 代碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:34px;
}

將font-size:34px之后,那么縫隙會(huì)變寬。

執(zhí)行結(jié)果:

同理,要去掉縫隙,那么需要將font-size:0;

復(fù)制代碼 代碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:0
}

執(zhí)行結(jié)果:

如此便實(shí)現(xiàn)了想要的布局,框里邊的文字也跟著消失了,同樣也證明文字的大小影響縫隙。只需要在子元素里重新設(shè)置就可以了。當(dāng)然今天的重點(diǎn)并不是這個(gè)。同樣的效果float:left;也可以輕松實(shí)現(xiàn)。

復(fù)制代碼 代碼如下:

style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    float:left
    }
/style>

執(zhí)行結(jié)果:

元素添加 float之后,此浮動(dòng)元素會(huì)在其碰到父級(jí)元素邊框或者另一個(gè)浮動(dòng)元素邊框,緊鄰其后顯示。例如下邊的例子,在浮動(dòng)元素總寬度大于父級(jí)元素時(shí),換行,換行的時(shí)候遇到前一個(gè)float并在其后顯示

復(fù)制代碼 代碼如下:

style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    float:left
    }
/style>

執(zhí)行結(jié)果:

如果使用inline-block,結(jié)果會(huì)是怎樣呢?

復(fù)制代碼 代碼如下:

style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    display:inline-block
    }
/style>

執(zhí)行結(jié)果:

此時(shí)框3是另起一行而不是跟在框1之后,(1,2之間的縫隙這里就不說了) 這也是一個(gè)使用inline-block和float的判斷,如果模塊寬度不一樣使用float排版可能會(huì)導(dǎo)致跟預(yù)想結(jié)果不一樣,所以在寬高不變的情況下使用float是極好的,如果不一致的話需要看具體的布局,使用恰當(dāng)?shù)膶傩浴?/P>

以下貼代碼,只貼修改的部分,其他不變,結(jié)構(gòu)不變。

如果去掉box3的float:left會(huì)是什么結(jié)果?按照理解,浮動(dòng)元素不占據(jù)空間,也就是框框3會(huì)無視框框1,框框2直接緊鄰父元素的邊框顯示,也就是框框1會(huì)蓋住框框3?那結(jié)果呢?

復(fù)制代碼 代碼如下:

.box3{
    width:100px;
    height:50px;
    background-color:green;
}

執(zhí)行結(jié)果:

為何框3的文字會(huì)出現(xiàn)在下邊而不是被框1覆蓋?接著看代碼,看圖

復(fù)制代碼 代碼如下:

.box3{
    height:50px;
    background-color:green;
}

執(zhí)行結(jié)果:

看出不一樣了沒?是的。box3沒有定義width;去掉了width,不定義寬度的情況下默認(rèn)寬度就是父元素的寬度,也就是說此時(shí)width:500px;浮動(dòng)元素覆蓋非浮動(dòng)元素,也就是框3前邊200px的寬度被浮動(dòng)元素覆蓋了,之所以文字沒有被覆蓋而且文字被浮動(dòng)元素?cái)D在200px之后的位置,原因呢?

  浮動(dòng)元素不會(huì)占據(jù)塊的空間,所以框三就是100%的父容器寬度 500px,但是浮動(dòng)元素會(huì)占據(jù)另外的空間,也就是行框空間,通俗的講就是文本所占的空間。

這也是圖片float之后,文本會(huì)自動(dòng)環(huán)繞圖片的原因。浮動(dòng)元素不占據(jù)塊級(jí)空間,但會(huì)影響塊級(jí)元素之內(nèi)的文字以及內(nèi)聯(lián)元素。

如此的話如果想要三個(gè)框?qū)挾纫粯樱敲粗恍枰獙⒖蛉齱idth:300px;

復(fù)制代碼 代碼如下:

.box3{
    width:300px;
    height:50px;
    background-color:green;
}

執(zhí)行結(jié)果:

到這里基本的浮動(dòng)說完了,那就要說說問題了,浮動(dòng)雖然好用,但是也會(huì)在實(shí)際中出現(xiàn)很多問題。例如:

style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
/style>

執(zhí)行結(jié)果:

很常見的問題,正常情況下。應(yīng)該灰色的背景會(huì)跟框一樣高,可事實(shí)總是不會(huì)盡如人意 :)

這種情況產(chǎn)生的原因,都知道是因?yàn)楦?dòng)造成的,是的,是浮動(dòng),很多地方有說浮動(dòng)元素會(huì)脫離普通流,所以普通元素可以當(dāng)浮動(dòng)元素不存在,所以這里就不會(huì)撐開背景了,但是認(rèn)真看的同學(xué),一定會(huì)記得上邊有提到浮動(dòng)元素不會(huì)影響塊框,但是會(huì)影響行框,也就是文字或內(nèi)聯(lián)元素,不管是塊級(jí)元素還是內(nèi)聯(lián)元素都屬于普通流,如果浮動(dòng)元素脫離普通流又為何會(huì)影響行框?其實(shí)我覺得不必要糾結(jié)于這些概念性的東西。按照我的理解浮動(dòng)元素就是跟塊級(jí)元素不在一個(gè)水平空間,跟文字內(nèi)聯(lián)元素在一個(gè)空間,所以這里邊框就相當(dāng)于在背景之上,所以不會(huì)影響背景元素,平常所說的清除浮動(dòng),并不是說把浮動(dòng)元素的float屬性去掉,而是清除其周圍的浮動(dòng)元素,使其自身周圍沒有浮動(dòng)元素,所以如果想讓框三到第二行,不能在框2里邊用clear:right;而是需要在框3里邊使用clear:left;

復(fù)制代碼 代碼如下:

.box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    clear:left
    }

執(zhí)行結(jié)果:

ok!理解了這個(gè),下來再說說如何使背景和框等高,第一種:最直接的辦法就是直接設(shè)置背景高度和框相等就Ok了,當(dāng)然這個(gè)不是重點(diǎn),下面來說說清除浮動(dòng)。首先先看看例子:

復(fù)制代碼 代碼如下:

!DOCtype>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
    .clear{
    width:100px;
    height:50px;
    }
/style>
/head>
body>
    div class="boxBg">
        div class="box1">
        框框1
        /div>
        div class="box2">
        框框2
        /div>
        div class="box3">
        框框3
        /div>
        div class="clear">/div>
    /div>
/body>
/html>

執(zhí)行結(jié)果:

以上結(jié)果實(shí)現(xiàn)了結(jié)果,很明顯是直接添加了一個(gè)高度相等的空元素,因?yàn)榇嗽貨]有浮動(dòng),所以是跟背景一樣,因此背景被撐開了。其實(shí)是用清除浮動(dòng)的原理跟這個(gè)是一樣的,也是想辦法撐開背景;以上去掉clear的寬,高,加上clear屬性

復(fù)制代碼 代碼如下:

.clear{
    clear:left;
    }

執(zhí)行結(jié)果:

這個(gè)可能還看不清楚,給clear框里邊加幾個(gè)字試試看

執(zhí)行結(jié)果:


因?yàn)閏lear用了clear:left綜上所述,clear左邊不能有浮動(dòng)元素,所以它必須另起一行顯示。如此便看到圖上的結(jié)果,其實(shí)還是用一個(gè)元素?fù)伍_的背景。當(dāng)然還有其他方法實(shí)現(xiàn),這里主要是講清楚浮動(dòng)就好了:)

您可能感興趣的文章:
  • 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論
  • CSS中position屬性之fixed實(shí)現(xiàn)div居中
  • 通過設(shè)置CSS中的position屬性來固定層的位置
  • 使用CSS樣式position:fixed水平滾動(dòng)的方法
  • css position: absolute、relative詳解
  • 推薦深入理解css中的position定位和z-index屬性
  • 詳解CSS不受控制的position fixed

標(biāo)簽:邵陽 萊蕪 貴州 鶴壁 廣安 賀州 混顯 滄州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別》,本文關(guān)鍵詞  詳細(xì),分析,css,float,屬性,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別》相關(guān)的同類信息!
  • 本頁收集關(guān)于詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章