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

資訊專(zhuān)欄INFORMATION COLUMN

利用clear清除浮動(dòng)的一些問(wèn)題

YancyYe / 1715人閱讀

摘要：下面這段代碼是用來(lái)清除浮動(dòng)帶來(lái)的高度塌陷問(wèn)題上面的代碼的能夠?qū)崿F(xiàn)清除浮動(dòng)的問(wèn)題嗎因?yàn)閷傩灾荒芸刂圃乇旧砼c前面的浮動(dòng)元素的關(guān)系。是因?yàn)楸举|(zhì)上，浮動(dòng)并沒(méi)被清除，我們只是利用屬性解決了浮動(dòng)元素帶來(lái)的父級(jí)元素高度塌陷問(wèn)題。

下面這段代碼是用來(lái)清除浮動(dòng)帶來(lái)的高度塌陷問(wèn)題

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

Question 1: 上面的代碼的能夠?qū)崿F(xiàn)清除浮動(dòng)的問(wèn)題嗎？

Answer： Can"t. 因?yàn)閏lear屬性只能控制元素本身與前面的浮動(dòng)元素的關(guān)系。在本例中，使用:before偽元素明顯位于所有子元素之前，故而clear屬性不會(huì)因后面的浮動(dòng)元素產(chǎn)生任何作用效果。 clear屬性的官方定義可以查看CSS文檔 。那么應(yīng)該如何修改呢？將:before換成:after即可。最終代碼如下：

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

Question 2: content屬性的內(nèi)容能改成空嗎content: "";？

Answer： Yes. 因?yàn)樵O(shè)置了 height:0; 和 visibility: hidden。 如果設(shè)置了content:"";，那么 height:0; 和 visibility: hidden和 可以去掉嗎？ 當(dāng)然可以，因?yàn)閴K元素沒(méi)有內(nèi)容就不會(huì)有高度咯。

更改后的代碼如下：

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

Question 3: display屬性的內(nèi)容能改成 inline 或 inline-block 嗎？

Answer： 不能。 我們要明白float屬性的初衷————讓文字環(huán)繞圖片展示。翻譯成另外一句話(huà)：內(nèi)聯(lián)級(jí)別的元素會(huì)環(huán)繞浮動(dòng)元素展示。那么為什么 display: block;可以解決高度塌陷的問(wèn)題呢。 因?yàn)?clear屬性的含義是不讓元素本身與浮動(dòng)元素的邊界相鄰。如果塊級(jí)元素要不與塊級(jí)元素邊界相鄰，只有換到下一行展示。也正為換行，才將父元素到高度撐開(kāi)了，正式上面的代碼解決高度塌陷的原理。

Question 4: 下面到div元素會(huì)存在高度塌陷問(wèn)題嗎？




    歷史的天空

Answer： 存在。為什么呢？要知道 clear屬性中， clear:left; 和 clear:right; 的區(qū)別。

left : 不與左浮動(dòng)的元素產(chǎn)生邊界接觸；

right : 不與右浮動(dòng)的元素產(chǎn)生邊界接觸；

both : 不與左浮動(dòng)和右浮動(dòng)的元素產(chǎn)生邊界接觸；

所以上面的代碼不會(huì)解決高度塌陷到問(wèn)題。

如果有如下代碼：





    
1

    
2

    
3





    
1

    
2

    
3


?

你會(huì)發(fā)現(xiàn)，兩個(gè)div的展示效果是相同的。也就是說(shuō)，如果前面同時(shí)存在左浮動(dòng)和右浮動(dòng)到元素，那么clear屬性值無(wú)論設(shè)成left 還是right都無(wú)關(guān)緊要。 反過(guò)來(lái)想，如果clear屬性設(shè)成 both，那么無(wú)論前面的元素是左浮動(dòng)還是右浮動(dòng)，都無(wú)關(guān)緊要。這也是clearfix通常設(shè)置 clear:both;的原因。

注意一點(diǎn)，我們一直在說(shuō) 解決 高度塌陷都問(wèn)題，從來(lái)沒(méi)有說(shuō)清除浮動(dòng)。 是因?yàn)楸举|(zhì)上，浮動(dòng)并沒(méi)被清除，我們只是利用clear屬性解決了浮動(dòng)元素帶來(lái)的父級(jí)元素高度塌陷問(wèn)題。而且clear屬性影響也只是設(shè)置clear屬性的元素本身，而不是浮動(dòng)元素。

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

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

相關(guān)文章

  • 清楚浮動(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

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問(wèn)題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問(wèn)題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開(kāi)發(fā)人員，需要有刨根問(wèn)底的精神，...

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

  • css清除浮動(dòng)常用的四種方法實(shí)現(xiàn)

    摘要：用這種方法清除浮動(dòng)，會(huì)為文檔中增加不必要的結(jié)構(gòu)，不推薦?？梢园?dòng)元素，所以能實(shí)現(xiàn)撐起高度的效果。以上是常用的幾種方法，可以根據(jù)場(chǎng)景的不同選擇適合的。 在頁(yè)面布局中經(jīng)常會(huì)用到浮動(dòng)和清除浮動(dòng)的操作，但之前是知其然而不知其所以然，看過(guò)多篇文章后，有了一些深入的了解，特整理下來(lái)！ 浮動(dòng)的目的： 最初設(shè)計(jì)浮動(dòng)的目的是為了實(shí)現(xiàn)文字等內(nèi)容可圍繞圖像顯示，后來(lái)發(fā)現(xiàn)浮動(dòng)方便布局，所以支持浮動(dòng)任何元素...

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

  • CSS清除浮動(dòng)float的三種方法總結(jié)，為什么清浮動(dòng)？浮動(dòng)會(huì)有那些影響？

    摘要：方法三據(jù)說(shuō)是最高大上的方法方法注意作用于浮動(dòng)元素的父親先說(shuō)原理這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用和來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。 一、拋一塊問(wèn)題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

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

  • 你從來(lái)沒(méi)了解過(guò)的CSS浮動(dòng) | Design Shack

    摘要：另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在一行。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類(lèi)似的效果。浮動(dòng)元素不能高過(guò)前一行內(nèi)聯(lián)元素。 浮動(dòng)到底是做什么呢？他們是如何影響相關(guān)元素的盒模型的呢？浮動(dòng)的元素與內(nèi)聯(lián)元素有什么不同呢？制定浮動(dòng)元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？ 即使是...

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

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

0條評(píng)論

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