成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入清除浮動(dòng)原理

freewolf / 1360人閱讀

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動(dòng)了。下面詳細(xì)看一下這兩大類清除浮動(dòng)的方式及原理。所以，避免穿透啊，清除浮動(dòng)什么的也好理解了。

關(guān)于浮動(dòng)

設(shè)置為浮動(dòng)的元素會(huì)脫離當(dāng)前文檔流，向左或向右移動(dòng)直到邊緣遇到另一個(gè)浮動(dòng)元素或者到達(dá)邊界。普通元素不會(huì)對(duì)齊造成影響。
浮動(dòng)是把雙刃劍，在給我們的布局帶來(lái)便利的同時(shí)有一些缺點(diǎn)需要我們?nèi)ソ鉀Q。例如最常見的父元素塌陷。如下圖所示： 

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html


可以看到父元素的高度為0,為了解決這種狀況就要清除浮動(dòng)了。

清楚浮動(dòng)的方式

總結(jié)了一下，大致有如下幾類:

1. 結(jié)尾空元素或者after等偽元素或者br 來(lái)clear
2. 父元素同樣浮動(dòng)
3. 父元素設(shè)置overflow為hidden或者auto 
4. 父元素display：table

大致歸類，可以分為兩大類，1使用clear的屬性，后面的可以歸為一類，都是通過(guò)觸發(fā)BFC來(lái)實(shí)現(xiàn)的。
下面詳細(xì)看一下這兩大類清除浮動(dòng)的方式及原理。

clear屬性

clear 屬性規(guī)定元素盒子的邊不能和浮動(dòng)元素相鄰。該屬性只能影響使用清除的元素本身，不能影響其他元素。
換而言之，如果已經(jīng)存在浮動(dòng)元素的話，那么該元素就不會(huì)像原本元素一樣受其影響了。
第一種方式里我們的填補(bǔ)元素(我自己的稱呼)，就是起這種作用。

//這里當(dāng)然可以換成一個(gè)空的div，
等，原理和效果都是一致的  
.warper:after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

此時(shí)after偽元素設(shè)置clear：both之后表明，我兩邊都不能接受浮動(dòng)元素，原本受浮動(dòng)元素影響，偽元素的位置在浮動(dòng)元素下方如圖：

這樣顯然也不能撐起父元素的高度。設(shè)置之后，需要重新安排安排了。
既然兩邊都不接受浮動(dòng)元素，但浮動(dòng)元素位置也確定了，那只能把偽元素放在下邊，如圖：


可以看到，偽元素的位置在最下方了，距頂部的高度為float元素的高度，順帶撐起了父元素的高度。
同樣適用其他填充元素（display為block），都能達(dá)到相同的目的。
在看后面幾種原理之前我們需要先看一下BFC的定義。

BFC 塊級(jí)格式化上下文：BFC(block formatting contexts)

照本宣科的定義看起來(lái)可能不大好理解，BFC是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
借用張?chǎng)涡翊蟠蟮囊痪湓?，BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。
所以，避免margin穿透啊，清除浮動(dòng)什么的也好理解了。

正如下面的解釋：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)
在BFC中，每個(gè)盒子的左外邊框緊挨著包含塊的左邊框（從右到左的格式，則為緊挨右邊框）。即使存在浮動(dòng)也是這樣的（盡管一個(gè)盒子的邊框會(huì)由于浮動(dòng)而收縮），除非這個(gè)盒子的內(nèi)部創(chuàng)建了一個(gè)新的BFC浮動(dòng)，盒子本身將會(huì)變得更窄）。

BFC的特性

塊級(jí)格式化上下文會(huì)阻止外邊距疊加

塊級(jí)格式化上下文不會(huì)重疊浮動(dòng)元素

塊級(jí)格式化上下文通?？梢园?dòng)

換句話說(shuō)創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，里面的子元素不會(huì)在布局上影響外面的元素，反之亦然
同時(shí)BFC任然屬于文檔中的普通流。所以呢浮動(dòng)也就解決了，關(guān)于BFC以后要專門搞個(gè)文章仔細(xì)研究一下。

看到這里就可以知道了，為什么可以拿來(lái)清除浮動(dòng)了，表現(xiàn)為BFC的元素都是一個(gè)十分個(gè)性的存在，無(wú)論里面怎么折騰，對(duì)外表現(xiàn)始終如一。
大家肯定可以猜到，上面幾種利用了BFC的清除方式肯定是觸發(fā)了BFC的條件，讓父元素變?yōu)锽FC。我們來(lái)看一下觸發(fā)BFC的條件，看是不是如我們所想。

BFC觸發(fā)條件

CSS3里面對(duì)這個(gè)規(guī)范做了改動(dòng)，稱之為：flow root，并且對(duì)觸發(fā)條件進(jìn)行了進(jìn)一步說(shuō)明。

float 除了none以外的值 
 
overflow 除了visible 以外的值（hidden，auto，scroll ） 
 
display (table-cell，table-caption，inline-block) 
 
position（absolute，fixed） 
 
fieldset元素

由上面可以對(duì)比一下，我們提到那幾種方法，就是觸發(fā)了BFC而已。
看個(gè)例子

.warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面屬性任選其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}

結(jié)束語(yǔ) 參考文章

CSS深入理解流體特性和BFC特性下多欄自適應(yīng)布局
理解CSS中BFC

到這里清除float相關(guān)的內(nèi)容就說(shuō)完了，知其然更要知其所以然，清除float的方式繁多無(wú)比，掌握其中原理才能不人云亦云。當(dāng)然拋磚引玉，更多的是共同學(xué)習(xí)共同進(jìn)步,更多請(qǐng)移步博客。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113305.html

相關(guān)文章

  • 浮動(dòng)(Floats)原理與清除浮動(dòng)

    摘要：父元素的頂端會(huì)限制浮動(dòng)元素防止一直浮動(dòng)到頁(yè)面頂端。例子戳這里清除浮動(dòng)清除浮動(dòng)的目的是為了解決高度塌陷的問(wèn)題撐開浮動(dòng)父元素。原理會(huì)在元素的之上增加一個(gè)清除區(qū)域這個(gè)區(qū)域會(huì)在元素的上增加額外間隔并且不允許浮動(dòng)元素進(jìn)入這個(gè)區(qū)域。 浮動(dòng)概念 浮動(dòng)元素會(huì)脫離文檔的普通流,根據(jù)float的值向左或向右移動(dòng),直到它的外邊界碰到父元素的內(nèi)邊界或另一個(gè)浮動(dòng)元素的外邊界為止。由于浮動(dòng)框不在文檔的普通流中,所...

    andong777 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問(wèn)主要來(lái)自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說(shuō)，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問(wèn)題：1.浮動(dòng)的原始用途...

    Tonny 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問(wèn)主要來(lái)自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說(shuō)，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問(wèn)題：1.浮動(dòng)的原始用途...

    cyqian 評(píng)論0 收藏0

  • BFC--margin折疊和清除浮動(dòng)

    摘要：背景以前在寫和的時(shí)候，兩個(gè)都設(shè)置了不同的上下值。它是決定塊盒子的布局及浮動(dòng)元素相互影響的一個(gè)因素。創(chuàng)建根元素絕對(duì)定位元素為或的值不為的值為的值不為折疊屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生折那如何阻止折疊呢，只要將其中一個(gè)創(chuàng)建新的就行了。 背景 以前在寫html和css的時(shí)候，兩個(gè)div都設(shè)置了margin不同的上下值。寫完后我開心的打開頁(yè)面，為毛兩個(gè)應(yīng)該隔的比較開的div，距離并不是我設(shè)置的m...

    zhangfaliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<