成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

清除浮動(dòng)（clearfix）的常見方法

Kahn / 1450人閱讀

摘要：此時(shí)可能會(huì)對(duì)周圍的布局產(chǎn)生影響，所以清除浮動(dòng)，顯得十分重要。主要的方法一使用屬性添加偽元素通過(guò)在父元素后面添加一個(gè)偽元素，設(shè)置為并清除左右浮動(dòng)解決問題。目前這個(gè)方法是最新的?？偨Y(jié)如上所述，清除浮動(dòng)有兩大方法，使用屬性和建立。

背景

當(dāng)一個(gè)父元素包含的子元素都設(shè)置為float的時(shí)候，父元素的高度會(huì)出現(xiàn)坍塌的現(xiàn)象（見下圖）。此時(shí)可能會(huì)對(duì)周圍的布局產(chǎn)生影響，所以清除浮動(dòng)，顯得十分重要。

主要的方法 一、使用clear屬性 1.添加偽元素

通過(guò)在父元素后面添加一個(gè)偽元素，設(shè)置為 block并清除左右浮動(dòng)解決問題。目前這個(gè)方法是最新的。

.container::after {
    content:" ";
    display:block;
    clear:both;
}

可能有些代碼有添加::before,且display：table

.container::after,.container::before{
    content:" ";
    display:table;
}   
.container::after{
    clear:both;
}

實(shí)際上添加的部分跟浮動(dòng)并沒有關(guān)系，他們的作用是防止子元素的margin-top發(fā)生重疊。
但添加::before就必須將display設(shè)置為table。主要原理：display設(shè)置為table時(shí)會(huì)出現(xiàn)一個(gè)匿名表格單元格（anonymous table-cell），從而創(chuàng)建一個(gè)新的BFC（下文會(huì)提及），根據(jù)BFC的布局規(guī)則，會(huì)使margin-top不重疊。這里只是解釋說(shuō)明有些代碼出現(xiàn)這種寫法的原因，如果沒有防止重疊的需求，完全可以精簡(jiǎn)代碼，使用上一種寫法。

有時(shí)還會(huì)在代碼的最后寫上

.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

這里主要是為了兼容IE6/7.

還有一種相似的做法

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

將display設(shè)置為block是因?yàn)?b>:after是偽元素，要想獲得clear屬性必須將他轉(zhuǎn)換為block。添加visibility: hidden;height: 0;是讓包含塊末端看起來(lái)不那么亂，所以就直接隱藏起來(lái)。

2、添加標(biāo)簽

最簡(jiǎn)單除粗暴的方法就是直接在包含塊末端添加一個(gè)標(biāo)簽，并且使用clear屬性。

但這種做法在HTML中語(yǔ)義不明確，一旦代碼量增加，后期比較難維護(hù)。慎用！

二、觸發(fā)浮動(dòng)元素父元素的BFC（什么是BFC？之前寫的另一篇文章視覺格式化模型之BFC） 1、使用overflow屬性 
.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

這里主要是將overflow設(shè)置為非visible值，建立一個(gè)BFC，根據(jù)BFC的布局規(guī)則將浮動(dòng)子元素包含進(jìn)來(lái)。需要注意的是，container 里面的內(nèi)容是否有溢出的風(fēng)險(xiǎn)。

2、使用float屬性

直接將包含塊設(shè)置為float。即可建立BFC。但這種做法不推薦，因?yàn)檎w浮動(dòng)會(huì)影響其他的布局。

總結(jié)

如上所述，清除浮動(dòng)有兩大方法，使用clear屬性和建立BFC。圍繞這兩方面可以使用很多小技巧。這里只是羅列幾個(gè)常見的方法，并詳細(xì)解釋每條語(yǔ)句的作用，雖然有點(diǎn)啰嗦，但重在理解。如果有更好的方法也歡迎補(bǔ)充。

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

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

相關(guān)文章

  • CSS學(xué)習(xí)摘要-浮動(dòng)與清除浮動(dòng)

    摘要：為了實(shí)現(xiàn)這個(gè)效果，我們需要清除浮動(dòng)。元素被向下移動(dòng)用于清除之前的左右浮動(dòng)。塊格式化上下文對(duì)浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)內(nèi)的元素。且為了不影響接下來(lái)的文檔標(biāo)準(zhǔn)流，往往也要收尾做出清除浮動(dòng)。以下從浮動(dòng)到BFC的段落 摘自MDN 網(wǎng)絡(luò)開發(fā)者float 浮動(dòng)float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁(yè)的正常流...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端入門-day3(CSS中浮動(dòng)和清除浮動(dòng))

    摘要：寫在前面浮動(dòng)是中一個(gè)相對(duì)比較麻煩的屬性，與之伴隨的通常是清除浮動(dòng)。清除浮動(dòng)因此，當(dāng)我們用到了浮動(dòng)，又不想出現(xiàn)這種情況的時(shí)候，就需要清除浮動(dòng)。因此，注意浮動(dòng)的使用場(chǎng)景，并且在需要的時(shí)候清除浮動(dòng)，就可以很好的控制浮動(dòng)啦 寫在前面 浮動(dòng)是CSS中一個(gè)相對(duì)比較麻煩的屬性，與之伴隨的通常是清除浮動(dòng)。今天我們一起來(lái)搞定浮動(dòng)。 常見的用法 事實(shí)上，當(dāng)我們將一個(gè)元素設(shè)置成浮動(dòng)時(shí)，達(dá)到的效果如下圖： s...

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

  • CSS入門指南-2：盒子模型、浮動(dòng)和清除

    摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁(yè)面上排布。 可見的頁(yè)面版式主要由三個(gè)屬性...

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

  • CSS入門指南-2：盒子模型、浮動(dòng)和清除

    摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁(yè)面上排布。 可見的頁(yè)面版式主要由三個(gè)屬性...

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

  • css隨堂筆記（三）

    摘要：隨堂筆記三關(guān)于背景圖片設(shè)置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設(shè)置一個(gè)方位詞，另外一個(gè)默認(rèn)居中如果設(shè)置的值是兩個(gè)方位詞，與順序無(wú)關(guān)數(shù)值背景位置如果設(shè)置的值是數(shù)字一個(gè)值得時(shí)候，表示水平方向的位移，垂直方向默認(rèn)居中兩個(gè)值得Css隨堂筆記（三） 1 關(guān)于背景圖片 ? A 設(shè)置背景圖片：background-image：url(圖片的路徑)； ? B 背景圖片位置： backgrou...

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

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

0條評(píng)論

閱讀需要支付1元查看
<