css float 屬性和position:absolute比較

來源:互聯網
上載者:User
相信很多人都有這樣的問題,在頁面配置中float和position:absolute哪個更好用呢?既然是布局,就用float好,這個我比較常用。這個浮動是可以清除的,一般不會影響整體布局。而position,定位,是不受約束的,這個貌似都談不上布局了,一般要是做什麼特殊的定位或者浮動層的時候,可以考慮使用。正常頁面配置,我個人建議用FLOAT

1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像,使文本圍繞在映像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會產生一個塊級框,而不論它本身是何種元素。p一個典型的區塊層級元素,會單獨佔據一行。

先看看最基本的區塊層級元素如何排列的。html代碼,以下樣式都是基於此。

複製代碼 代碼如下:


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

css代碼:

複製代碼 代碼如下:


.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
}

執行結果:

由於p是區塊層級元素,所以框會以縱向形式排列。在實際操作中往往需要將框橫向排列。有兩種方式可以實現。第一種將display:inlin-block;

複製代碼 代碼如下:


.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
}

執行結果:

至於中間的縫隙,追溯到本質原因是元素之間的空白符引起的,所以在父元素設定fone-size的大小,可以調節空白縫隙的大小。

複製代碼 代碼如下:


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

將font-size:34px之後,那麼縫隙會變寬。

執行結果:

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

複製代碼 代碼如下:


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

執行結果:

如此便實現了想要的布局,框裡邊的文字也跟著消失了,同樣也證明文字的大小影響縫隙。只需要在子項目裡重新設定就可以了。當然今天的重點並不是這個。同樣的效果float:left;也可以輕鬆實現。

複製代碼 代碼如下:


<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>

執行結果:

元素添加 float之後,此浮動元素會在其碰到父級元素邊框或者另一個浮動元素邊框,緊鄰其後顯示。例如下邊的例子,在浮動元素總寬度大於父級元素時,換行,換行的時候遇到前一個float並在其後顯示

複製代碼 代碼如下:


<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>

執行結果:

如果使用inline-block,結果會是怎樣呢?

複製代碼 代碼如下:


<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>

執行結果:

此時框3是另起一行而不是跟在框1之後,(1,2之間的縫隙這裡就不說了) 這也是一個使用inline-block和float的判斷,如果模組寬度不一樣使用float排版可能會導致跟預想結果不一樣,所以在寬高不變的情況下使用float是極好的,如果不一致的話需要看具體的布局,使用恰當的屬性。

以下貼代碼,只貼修改的部分,其他不變,結構不變。

如果去掉box3的float:left會是什麼結果?按照理解,浮動元素不佔據空間,也就是框框3會無視框框1,框框2直接緊鄰父元素的邊框顯示,也就是框框1會蓋住框框3?那結果呢?

複製代碼 代碼如下:


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

執行結果:

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

複製代碼 代碼如下:


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

執行結果:

看出不一樣了沒?是的。box3沒有定義width;去掉了width,不定義寬度的情況下預設寬度就是父元素的寬度,也就是說此時width:500px;浮動元素覆蓋非浮動元素,也就是框3前邊200px的寬度被浮動元素覆蓋了,之所以文字沒有被覆蓋而且文字被浮動元素擠在200px之後的位置,原因呢?

浮動元素不會佔據塊的空間,所以框三就是100%的父容器寬度 500px,但是浮動元素會佔據另外的空間,也就是行框空間,通俗的講就是文本所佔的空間。

這也是圖片float之後,文本會自動環繞圖片的原因。浮動元素不佔據塊級空間,但會影響區塊層級元素之內的文字以及內嵌元素。

如此的話如果想要三個框寬度一樣,那麼只需要將框三width:300px;

複製代碼 代碼如下:


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

執行結果:

到這裡基本的浮動說完了,那就要說說問題了,浮動雖然好用,但是也會在實際中出現很多問題。例如:

<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>

執行結果:

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

這種情況產生的原因,都知道是因為浮動造成的,是的,是浮動,很多地方有說浮動元素會脫離普通流,所以普通元素可以當浮動元素不存在,所以這裡就不會撐開背景了,但是認真看的同學,一定會記得上邊有提到浮動元素不會影響塊框,但是會影響行框,也就是文字或內嵌元素,不管是區塊層級元素還是內嵌元素都屬於普通流,如果浮動元素脫離普通流又為何會影響行框?其實我覺得不必要糾結於這些概念性的東西。按照我的理解浮動元素就是跟區塊層級元素不在一個水平空間,跟文字內嵌元素在一個空間,所以這裡邊框就相當於在背景之上,所以不會影響背景元素,平常所說的清除浮動,並不是說把浮動元素的float屬性去掉,而是清除其周圍的浮動元素,使其自身周圍沒有浮動元素,所以如果想讓框三到第二行,不能在框2裡邊用clear:right;而是需要在框3裡邊使用clear:left;

複製代碼 代碼如下:


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

執行結果:

ok!理解了這個,下來再說說如何使背景和框等高,第一種:最直接的辦法就是直接設定背景高度和框相等就Ok了,當然這個不是重點,下面來說說清除浮動。首先先看看例子:

複製代碼 代碼如下:


<!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>
<p class="boxBg">
<p class="box1">
框框1
</p>
<p class="box2">
框框2
</p>
<p class="box3">
框框3
</p>
<p class="clear"></p>
</p>
</body>
</html>

執行結果:

以上結果實現了結果,很明顯是直接添加了一個高度相等的空元素,因為此元素沒有浮動,所以是跟背景一樣,因此背景被撐開了。其實是用清除浮動的原理跟這個是一樣的,也是想辦法撐開背景;以上去掉clear的寬,高,加上clear屬性

複製代碼 代碼如下:


.clear{
clear:left;
}

執行結果:

這個可能還看不清楚,給clear框裡邊加幾個字試試看

執行結果:


因為clear用了clear:left綜上所述,clear左邊不能有浮動元素,所以它必須另起一行顯示。如此便看到圖上的結果,其實還是用一個元素撐開的背景。當然還有其他方法實現,這裡主要是講清楚浮動就好了:)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.