摘要:包裹性所謂包裹性,其實是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中,如果子元素設(shè)置浮動屬性,則父元素就會出現(xiàn)高度塌陷的問題。
float屬性是CSS中常用的一個屬性,在實際工作中使用的非常多,如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了,但是對于優(yōu)秀的前端開發(fā)人員,需要有"刨根問底"的精神,這樣在出現(xiàn)一些問題的時候才不至于"手慌腳亂"!因此,今天就特別整理和總結(jié)一下float屬性。1. float介紹
CSS世界中的float屬性是一個年代非常久遠(yuǎn)的屬性,設(shè)置了float屬性的元素會根據(jù)設(shè)置的屬性值向左或者向右浮動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。設(shè)置了float屬性的元素會從普通文檔流中脫離,相當(dāng)于不占據(jù)任何空間,所以文檔中普通流中的元素表現(xiàn)的就像浮動元素不存在一樣,因此,設(shè)置float屬性的后會影響我們的頁面布局。具體說來就是:讓block元素?zé)o視float元素,讓inline元素像流水一樣圍繞著float元素實現(xiàn)浮動布局。
float屬性設(shè)計的初衷:僅僅是讓文字像流水一樣環(huán)繞浮動元素,就像下圖中展示的一樣:
2. float的特性float有哪些有意思的特性呢?具體如下:
包裹性
高度塌陷
塊狀化
沒有任何margin合并
下面將詳細(xì)闡述這幾點的含義。
2.1 包裹性所謂"包裹性",其實是由"包裹"和"自適應(yīng)"兩部分組成。假設(shè)有以下CSS代碼:
/* CSS代碼 */
.father{
border: 1px solid deeppink;
width: 200px;
}
.son {
float: left;
font-size: 0;
border: 1px solid blue;
padding: 5px;
}
.father img {
width: 128px;
}
1)包裹。本例中將浮動元素父元素寬度設(shè)置為200px,浮動元素的子元素是一個128px寬度的圖片,則此時浮動元素寬度表現(xiàn)為"包裹",也就是里面圖片的寬度128px。
/* HTML代碼 */![]()
2)自適應(yīng)性。在浮動子元素的中增加一些文字:
/* HTML代碼 */美女1,美女2,美女3,美女4,美女5,美女6,后宮1,后宮2,后宮3,后宮
此時,浮動元素寬度就自適應(yīng)父元素的200px寬度,最終的寬度表現(xiàn)也是200px。如下圖所示:
2.2 高度塌陷float屬性有一個著名的特性:會讓父元素的高度塌陷。如章節(jié)2.1中的效果圖,父元素div的高度并沒有被子元素?fù)伍_(粉色區(qū)域),這種效果可以稱為"高度塌陷"。float給div.son施了個障眼法,讓該元素的高度塌陷為0了,這樣外層div計算高度時,認(rèn)為div.son的高度為0,相當(dāng)于div.son的content的高度為0,則div.father認(rèn)為其沒有子元素,所以產(chǎn)生了高度塌陷。后文中將講述如何解決高度塌陷的問題。
2.3 塊狀化塊狀化的意思是,一旦元素float的屬性不為none,則其display計算值就是block或者table。舉個例子:
/* JavaScript代碼 */
var span = document.createElement("span")
document.body.appendChild(span)
console.log("1." + window.getComputedStyle(span).display)
// 設(shè)置元素左浮動
span.style.cssFloat = "left"
console.log("2." + window.getComputedStyle(span).display)
在控制臺中的結(jié)果如下:
1.inline 2.block
不知道大家有沒有跟我一樣的疑問:既然設(shè)置float后,元素就塊狀化了,那么怎么還能產(chǎn)生包裹性的效果呢?回答這個問題,需要重新闡述下塊狀化的意思,這里的塊狀化意思是可以像block元素一樣設(shè)置寬和高,并不是真正的塊元素。
因此,沒有任何理由出現(xiàn)下面的樣式組合:
span{
display: block; /* 多余 */
float: left;
}
span{
float: left;
vertical-align: middle; /* 多余 */
}
2.4 沒有任何的margin重疊
在這里,我們將.son類增加margin:10px樣式,在瀏覽器中查看實際效果。
/* HTML 代碼 */![]()
![]()
![]()
我們增加.son類的margin為10px,在瀏覽器中查看相鄰的.son元素的空白區(qū)域的高度是20px,可以發(fā)現(xiàn)設(shè)置了float屬性的元素沒有任何的margin重疊,這和普通的元素margin重疊不一樣。
3. float與流體布局使用float可以通過破壞正常的文檔流實現(xiàn)CSS環(huán)繞,但是卻帶來了"高度塌陷"的問題!然而我們可以利用float破壞正常文檔流的特性實現(xiàn)一些常用的布局:
文字環(huán)繞變身-中間內(nèi)容居中,左中右布局
直接看例子:
.box{
background-color: #f5f5f5;
}
.fl{
float: left;
}
.fr{
float: right;
}
.text-center{
text-align: center;
}
從下圖中看出,實現(xiàn)了中間內(nèi)容居中的左中右布局。
文字環(huán)繞的衍生-單側(cè)固定
![]()
美女1,美女2,美女3,美女4,美女5,美女6,后宮1,后宮2,后宮3,后宮4,后宮5,后宮6
.father{
border: 1px solid #444;
overflow: hidden;
}
.father > img {
width: 60px; height: 64px;
float: left;
}
.girl {
/* 環(huán)繞和自適應(yīng)的區(qū)別所在 */
margin-left: 70px;
}
和文字環(huán)繞效果相比,區(qū)別就是.girl多了一個margin-left: 70px,同時圖片的寬度設(shè)置60px,因此不會發(fā)生文字環(huán)繞的效果。這里,我們也可以不使用margin-left,改用border-left或者padding-left都可以達(dá)到改變content box的尺寸,從而實現(xiàn)寬度自適應(yīng)布局效果。
4. float的克星既然使用float屬性會帶來一系列的問題,那么有沒有辦法消除這些問題呢?答案是:肯定有。接著看下文。
4.1 clear屬性在CSS中可以使用clear來清除float屬性帶來高度塌陷等問題,使用格式如下:
clear: none | left | right | both
none:默認(rèn)值,允許兩邊都有浮動對象;
left:不允許左側(cè)有浮動對象;
right:不允許右側(cè)有浮動對象;
both:兩側(cè)不允許有浮動對象。
如果單從字面上的意思來理解,clear:left應(yīng)該是"清除左浮動",clear:right應(yīng)該是"清除右浮動",實際上,這種說法是有問題的,因為浮動一直還在,并沒有清除!只能清除浮動帶來的影響。
官方對clear屬性的解釋是:"元素盒子的邊不能和前面的浮動元素相鄰"。注意這里的"前面的"3個字,也就是clear屬性對"后面的"浮動元素是不聞不問的。clear屬性只能清除元素的自身,不能影響其他的元素。接著看下面的這個例子:
/* HTML代碼 */
/* CSS代碼 */
.box1 {
float: left;
width: 100px;
height: 60px;
padding: 10px;
border: 3px solid black;
background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
border: 3px solid red;
padding:10px;
width:100px;
height: 60px;
background: url("../../lib/img/mm2.jpg") center no-repeat;
}
如上圖所示,box1元素為設(shè)置了左浮動,已經(jīng)脫離了正常的文檔流,所以box2能夠在box1的底層顯示。如果想讓box2能夠換行排列,則只需要在.box2類中增加clear:left樣式即可。如下圖所示:
4.2 clear屬性的不足clear屬性只對塊級元素有效,但是::after等偽元素默認(rèn)都是內(nèi)聯(lián)水平,因此,在實際工作中,我們常常使用下面的代碼來清除浮動帶來的影響:
.clear::after{
content: "";
display: table;/*也可以是"block"或者是"list-item"*/
clear: both;
}
由于clear:both作用的本質(zhì)是讓自己不和float元素在一行顯示,并不是真正意義上的清除浮動,因此float元素有一些不好的特性依然存在,表現(xiàn)在:
如果clear:both元素前面的元素就是float元素,則設(shè)置margin-top無效;
/* HTML代碼 */
/* CSS代碼 */
.box1 {
float: left;
width: 100px;
height: 60px;
padding: 10px;
border: 3px solid black;
background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
clear: both;
margin-top: -20px;
border: 3px solid red;
padding:10px;
width:100px;
height: 60px;
background: url("../../lib/img/mm2.jpg") center no-repeat;
}
在本例中,設(shè)置.box2中的margin-top沒有任何的效果,如下圖所示:
clear:both后面的元素依舊可能會發(fā)生文字環(huán)繞現(xiàn)象。
![]()
美女1,美女2,美女3,美女4,美女5,美女6,后宮1,后宮2,后宮3,后宮
我要美女1,我還要美女2
/* CSS代碼 */
.father{
border: 1px solid deeppink;
width: 500px;
height: 70px;
}
.father:after{
content: "";
display: table;
clear: both;
}
.float{
float: left;
}
.father img {
width: 60px;
height: 70px;
}
在本例中,設(shè)置clean:both來阻止浮動對后面元素的影響,但是最后的錯位效果依然發(fā)生了(可以設(shè)置.father的字體大小為0,然后設(shè)置p標(biāo)簽的字體大小解決錯誤的問題)。
由此可見,clear:both只能在一定程度上消除浮動的影響,要想完美去除浮動元素的影響,借助其他的手段——BFC,接著看下文。
5. CSS世界的結(jié)界——BFC 5.1 BFC的定義BFC全稱block formatting context,中文為"塊級格式化上下文"。BFC的表現(xiàn)原則為:如果一個元素具有BFC,那么它的內(nèi)部子元素再怎么翻江倒海,都不會影響外部的元素。因此,BFC元素是不可能發(fā)生margin重疊的,另外,BFC元素也可以用來清除浮動的影響。
那么滿足什么條件才會有BFC呢?只要滿足下面任意一個條件就會觸發(fā)BFC:
html根元素;
float的值不為none;
overflow的值為auto、scroll或者h(yuǎn)idden;
display的值為table-cell、table-caption和inline-block中的任何一個;
position的值不為relative和static;
觸發(fā)BFC后,就不需要使用clear:both屬性去清除浮動的影響。
5.2 BFC的作用清除margin重疊
/* HTML 代碼 */item 1
item 2
item 3
item 4
/* CSS 代碼 */
.parent{
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 10px 0;
text-align: center;
}
在這種情況下,出現(xiàn)了margin重疊的效果。如下圖所示:
利用BFC能消除margin重疊,謹(jǐn)記:只有當(dāng)元素在同一個BFC中時,垂直方向上的margin才會clollpase。如果它們屬于不同的BFC,則不會有margin重疊。因此我們可以再建立一個BFC去阻止margin重疊的發(fā)生。所以為了讓他們的margin變成20px,我們只需要用div,建立一個BFC,令p元素處于不同BFC即可。請看例子:
/* HTML代碼 */item 1
item 2
item 4
從下圖中可以看出,借助BFC消除了margin重疊的問題。
清除高度塌陷的問題
在上面的章節(jié)中,如果子元素設(shè)置浮動屬性,則父元素就會出現(xiàn)高度塌陷的問題。在這里,我們可以借助BFC消除高度塌陷的問題了,請看下面的這個例子:
/* HTML代碼 */
從下圖中可以看到,設(shè)置overflow:hidden樣式后就產(chǎn)生了BFC,根據(jù)BFC的表現(xiàn)規(guī)則,內(nèi)部元素的樣式不會影響外部元素的樣式,因此沒有出現(xiàn)高度塌陷的問題。
自適應(yīng)布局(阻止文本換行)
/* HTML代碼 */![]()
美女1,美女2,美女3,美女4,美女5,美女6,后宮1,后宮2,后宮3,后宮4,
/* CSS代碼 */
.parent{
border: 1px solid deeppink;
width: 200px;
font-size: 0;
}
.parent img{
border: 1px solid blue;
float: left;
}
.girl{
/*overflow: hidden;*/
font-size: 12px;
background-color: #cdcdcd;
}
如果我們給.girl元素設(shè)置具有BFC特性的屬性,如:overflow: hidden就可以實現(xiàn)更健壯、更智能的自適應(yīng)布局。
這里的.girl元素為了不和浮動元素產(chǎn)生任何交集,順著浮動邊緣形成自己的封閉上下文。
普通元素在設(shè)置了overflow:hidden后,會自動填滿容器中除了浮動元素意外的剩余空間,形成自適應(yīng)效果,這種自適應(yīng)布局和純流體布局相比:
自適應(yīng)內(nèi)容由于封閉而更加健壯,容錯性更強(qiáng);
自適應(yīng)內(nèi)容能夠填滿除浮動元素以外區(qū)域,不需要關(guān)心浮動元素寬度。
6. 結(jié)語本文是我學(xué)習(xí)float屬性總結(jié)文章,可能存在理解準(zhǔn)確的地方,歡迎大家在評論區(qū)評論,指點迷津,大家互相幫助,互相進(jìn)步。
最后,希望本文的內(nèi)容能夠?qū)δ鷮loat的理解能夠有所幫助,感謝閱讀。
參考張鑫旭-《CSS世界》
遇見了,不妨關(guān)注下我的微信公眾號「前端Talkking」
?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/113141.html
摘要:前言在前面的兩篇文章深入理解之浮動和深入理解之定位中,介紹了和的特性和使用方法,如果大家仔細(xì)閱讀完了這兩篇文章,相信你的打怪技能又提高的一大截,那么趁著自己最近狀態(tài)不錯,就多給大家分享點自己平時所學(xué)的技能。 1.前言 在前面的兩篇文章:CSS深入理解之float浮動和CSS深入理解之a(chǎn)bsolute定位中,介紹了float和absolute的特性和使用方法,如果大家仔細(xì)閱讀完了這兩篇文...
摘要:按照定義來解釋,就是兩行文字之間基線之間的距離。了解完基線的定義后,我們接著來聊行高。上面我們說過,行高就是兩條基線的之間的距離,如下圖所示。 1.寫在前面 兩個多周的時間沒有寫文章了,手好癢好癢,趁著公司在裝修,從上周末到本周都在家辦公,同時公司的項目并不緊急,于是抽著時間梳理了一下CSS中關(guān)于行高line-height的理解,今天發(fā)布出來,大家準(zhǔn)備好了嗎? 2.基本概念 2.1行高...
摘要:基本上就是將單側(cè)投影中的技巧運(yùn)用兩次,以如下所示在瀏覽器中的效果如下模擬邊框使用屬性可以模擬的效果,以如下所示在瀏覽器中的效果如下我們可以看到利用屬性模擬了的效果,但是與不同的是,使用創(chuàng)建的邊框效果并不會影響元素的尺寸。 1.寫在前面 在CSS3中,可以使用box-shadow屬性來創(chuàng)建陰影效果來給二維平面增加深度效果,這個屬性在前端開發(fā)中使用的非常多,例如segmentfault的首...
摘要:寫在前面這兩天,大家一定是被紅月亮刷屏了吧我們都被下面漂亮的月亮迷倒了吧哈哈,大家清醒清醒,那么漂亮的月亮,大家有沒有想過我們的可以搞定任意顏色的月亮呢答案是肯定可以的。 1.寫在前面 這兩天,大家一定是被紅月亮刷屏了吧?我們都被下面漂亮的月亮迷倒了吧?showImg(https://segmentfault.com/img/bV21NB?w=102&h=101); 哈哈,大家清醒清醒...
閱讀 3034·2021-09-23 11:44
閱讀 1899·2021-09-13 10:24
閱讀 2971·2021-09-08 09:36
閱讀 1428·2019-08-30 15:54
閱讀 2475·2019-08-30 13:54
閱讀 3511·2019-08-30 10:57
閱讀 2143·2019-08-29 18:43
閱讀 3985·2019-08-29 15:10