利用clear清除浮動的一些問題

YancyYe 發(fā)布于2019-08-30 15:55 / 1711人閱讀

摘要：下面這段代碼是用來清除浮動帶來的高度塌陷問題上面的代碼的能夠?qū)崿F(xiàn)清除浮動的問題嗎因為屬性只能控制元素本身與前面的浮動元素的關系。是因為本質(zhì)上，浮動并沒被清除，我們只是利用屬性解決了浮動元素帶來的父級元素高度塌陷問題。

下面這段代碼是用來清除浮動帶來的高度塌陷問題

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

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

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

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

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

Answer： Yes. 因為設置了 height:0; 和 visibility: hidden。如果設置了content:"";，那么 height:0; 和 visibility: hidden和可以去掉嗎？當然可以，因為塊元素沒有內(nèi)容就不會有高度咯。

更改后的代碼如下：

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

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

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

Question 4: 下面到div元素會存在高度塌陷問題嗎？



    歷史的天空

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

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

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

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

所以上面的代碼不會解決高度塌陷到問題。

如果有如下代碼：

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

注意一點，我們一直在說解決高度塌陷都問題，從來沒有說清除浮動。是因為本質(zhì)上，浮動并沒被清除，我們只是利用clear屬性解決了浮動元素帶來的父級元素高度塌陷問題。而且clear屬性影響也只是設置clear屬性的元素本身，而不是浮動元素。

GPU云服務器云服務器浮動clear 清除浮動云服務器可以清除哪一些文件 html5浮動問題

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

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

清楚浮動/邊界塌陷bfc

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

remcarpediem 2019-08-30 11:25 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

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

yankeys 2019-08-29 15:10 評論0 收藏0
css清除浮動常用的四種方法實現(xiàn)

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

iliyaku 2019-08-29 16:14 評論0 收藏0
CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

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

MAX_zuo 2019-08-28 18:28 評論0 收藏0
你從來沒了解過的CSS浮動 | Design Shack

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

XGBCCC 2019-08-02 16:13 評論0 收藏0