国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

cyqian / 1789人閱讀

摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問(wèn)主要來(lái)自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說(shuō)，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。

作為前端寫(xiě)了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫(xiě)篇博文解決這塊盲點(diǎn)。

本文主要討論以下幾個(gè)問(wèn)題：
1.浮動(dòng)的原始用途
2.浮動(dòng)為什么會(huì)有文本環(huán)繞效果
3.如何清理浮動(dòng)造成的影響

浮動(dòng)的原始用途

以下內(nèi)容來(lái)自張?chǎng)涡翊笊竦摹禖SS float浮動(dòng)的深入研究、詳解及拓展(一)》：

假設(shè)現(xiàn)在CSS中沒(méi)有浮動(dòng)(float)屬性，那么會(huì)變成一個(gè)什么樣子。我們會(huì)發(fā)現(xiàn)，目前流行采用浮動(dòng)方法實(shí)現(xiàn)的無(wú)論是分欄布局，還是列表排列我們都可以用其他一些CSS屬性（不考慮table）代替實(shí)現(xiàn)，唯一一個(gè)實(shí)現(xiàn)不了的就是“文字環(huán)繞圖片”，我是想不出來(lái)能有什么方法可以讓文字環(huán)繞圖片顯示。好，這個(gè)替代不了的作用才是float真正的意義所在。

總結(jié)起來(lái)一句話：實(shí)現(xiàn)文本環(huán)繞圖片的效果。

浮動(dòng)為什么會(huì)有文本環(huán)繞效果

產(chǎn)生這個(gè)疑問(wèn)主要來(lái)自于以往的印象：

浮動(dòng)的元素是脫離文檔流的。

咦？你都脫離文檔流了不是應(yīng)該和下方未浮動(dòng)的元素重疊嗎，為什么文本還能環(huán)繞你呢？

這個(gè)問(wèn)題一直困擾著我，直到我看到《精通CSS》這本書(shū)。文中寫(xiě)到：

浮動(dòng)會(huì)讓元素脫離文檔流，不再影響不浮動(dòng)的元素。實(shí)際上，并不完全如此。如果浮動(dòng)的元素后面有一個(gè)文檔流中的元素，那么這個(gè)元素的框會(huì)表現(xiàn)得像浮動(dòng)根本不存在一樣。但是，框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響，會(huì)移動(dòng)以留出空間。

也就是說(shuō)，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無(wú)視浮動(dòng)的元素，但是文本不會(huì)。這點(diǎn)與絕對(duì)定位的脫離文檔流不一樣。

知乎上張秋怡學(xué)姐的回答也印證了這一觀點(diǎn)。

補(bǔ)充一點(diǎn)：文檔流這個(gè)說(shuō)法其實(shí)不準(zhǔn)確，在W3C標(biāo)準(zhǔn)中，只有普通流(normal flow)，但是許多國(guó)內(nèi)文章和翻譯的書(shū)籍里用的都是文檔流，久而久之大家就都用文檔流的說(shuō)法了。

如何清理浮動(dòng)造成的影響

其實(shí)浮動(dòng)帶來(lái)的影響主要是

1.元素脫離普通流造成的父元素高度塌陷
2.下方非文本元素與浮動(dòng)元素重疊，破壞了原本布局

要清理這些影響，很多人都知道用clear屬性,為什么clear能清除浮動(dòng)呢？

有兩種說(shuō)法：
1.瀏覽器在設(shè)置clear元素的頂上添加足夠多的外邊距，使元素上邊框邊界垂直下降到浮動(dòng)元素下外邊距的下面。
2.在設(shè)置clear元素的上外邊距之上增加清除空間，而外邊距本身不改變。

前者是CSS1和CSS2的實(shí)現(xiàn)原理，后者是CSS2.1的實(shí)現(xiàn)原理。但無(wú)論哪種都達(dá)到了給浮動(dòng)的元素留出了垂直空間，看上去清除了浮動(dòng)的效果。同時(shí)，在設(shè)置clear元素之上填充的空間是實(shí)際存在于普通流中的。因此，父元素高度被撐開(kāi)了。

關(guān)于清除浮動(dòng)，其實(shí)還有許多方法。在《那些年我們一起清除過(guò)的浮動(dòng)》這篇文章里，將清除浮動(dòng)的方法簡(jiǎn)單分為兩類(lèi)：

1.通過(guò)在浮動(dòng)元素的末尾添加一個(gè)空元素，設(shè)置 clear：both屬性，after偽元素其實(shí)也是通過(guò) content 在元素的后面生成了內(nèi)容為一個(gè)點(diǎn)的塊級(jí)元素；
2.通過(guò)設(shè)置父元素 overflow 或者display：table 屬性來(lái)閉合浮動(dòng)。

幾乎所有清除浮動(dòng)的方法都可以歸納到這兩類(lèi)中，這里結(jié)合上面的博文談一談，添加偽元素的方法：

1.display: block，使生成的元素以塊級(jí)元素顯示，占滿剩余空間。
2.在content中添加一個(gè)點(diǎn)，因?yàn)檫@個(gè)字符非常小。
3.設(shè)置height為0，因?yàn)椴幌Ｍ@個(gè)新的內(nèi)容占據(jù)空間破壞布局高度。
4.將visibility設(shè)置為hidden，使生成的內(nèi)容不可見(jiàn)，允許可能被生成的內(nèi)容蓋住的部分可以點(diǎn)擊和交互。
5.clear:　both清理浮動(dòng)的影響

代碼如下：

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

這種方法在大多數(shù)現(xiàn)代瀏覽器中都是有效的，也是比較推薦的。至于其他方法網(wǎng)上有很多，這里就不詳細(xì)講了。

本文借鑒了部分其他博客與文檔，附上鏈接：

參考鏈接：

CSS clear屬性

CSS 浮動(dòng)

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

那些年我們一起清除過(guò)的浮動(dòng)

noraml flow

CSS float浮動(dòng)的深入研究、詳解及拓展(一)

張秋怡的回答

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

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

相關(guān)文章

  • 理解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ì)。 作為前端寫(xiě)了很多頁(yè)面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫(xiě)篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問(wèn)題：1.浮動(dòng)的原始用途...

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

  • CSS布局 ——從display，position， float屬性談起

    摘要：生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位。元素的位置通過(guò)以及屬性進(jìn)行規(guī)定。因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素，可以通過(guò)屬性控制疊放順序，越高，元素位置越靠上。頁(yè)面布局，或者是在頁(yè)面上做些小效果的時(shí)候經(jīng)常會(huì)用到 display,position和float 屬性，如果對(duì)它們不是很了解的話，很容易出現(xiàn)一些莫名其妙的效果，痛定思痛讀了《CSS Maste...

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

  • 了解CSS浮動(dòng)以及清理浮動(dòng)（Float）

    摘要：浮動(dòng)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS浮動(dòng) 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS ...

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

  • 清楚浮動(dòng)/邊界塌陷bfc

    摘要：不會(huì)重疊浮動(dòng)元素可以包含浮動(dòng)我們可以利用的第三條特性來(lái)清浮動(dòng)，這里其實(shí)說(shuō)清浮動(dòng)已經(jīng)不再合適，應(yīng)該說(shuō)包含浮動(dòng)。總而言之清理浮動(dòng)兩種方式利用屬性，清除浮動(dòng)使父容器形成 CSS清浮動(dòng)處理（Clear與BFC）在CSS布局中float屬性經(jīng)常會(huì)被用到，但使用float屬性后會(huì)使其在普通流中脫離父容器，讓人很苦惱 1 浮動(dòng)帶來(lái)布局的便利，卻也帶來(lái)了新問(wèn)題 復(fù)制代碼 1 2 3 4 ...

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

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向

    摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

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

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

0條評(píng)論

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