|
|
1.float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 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之間的縫隙這里就不說(shuō)了) 這也是一個(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ì)無(wú)視框框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)寬度就是父元素的寬度，也就是說(shuō)此時(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)說(shuō)完了，那就要說(shuō)說(shuō)問(wèn)題了，浮動(dòng)雖然好用，但是也會(huì)在實(shí)際中出現(xiàn)很多問(wè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é)果：
很常見的問(wèn)題，正常情況下。應(yīng)該灰色的背景會(huì)跟框一樣高，可事實(shí)總是不會(huì)盡如人意 :)
這種情況產(chǎn)生的原因，都知道是因?yàn)楦?dòng)造成的，是的，是浮動(dòng)，很多地方有說(shuō)浮動(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ì)影響背景元素，平常所說(shuō)的清除浮動(dòng)，并不是說(shuō)把浮動(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è)，下來(lái)再說(shuō)說(shuō)如何使背景和框等高，第一種：最直接的辦法就是直接設(shè)置背景高度和框相等就Ok了，當(dāng)然這個(gè)不是重點(diǎn)，下面來(lái)說(shuō)說(shuō)清除浮動(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)就好了:)
HTML/CSS技術(shù)：詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
