詳解關于浮動元素float使其父元素高度塌陷的原因及解決方法_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

float就是浮動的意思。float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。注釋:假如在一行之上只有極少的空間可供浮動元素,那么這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。默認值:none繼承性:no版本:CSS1JavaScript 語法:object.style.cssFloat="left可能的值值 描述left 元素向左浮動。right 元素向右浮動。none 默認值。元素不浮動,并會顯示在其在文本中出現的位置。inherit 規定應該從父元素繼承 float 屬性的值www.13333515.buzz防采集請勿采集本網。

浮動元素使其父元素高度塌陷我們經常會遇到一種情況,給一個元素設置浮動之后 float:left/right;,如果該元素的父元素有背景顏色,那么會發現父元素的背景顏色消失了;如果父元素有一個邊框,那么浮動元素無法將邊框撐開。

使用float之后,所使用float的元素脫離了文檔流,這樣的話比如: float:left;width:100px;height:100px;border:1px solid#000;height:100px;border:1px solid#000;這兩個div是

從以上兩張圖中可以看出添加浮動元素后,li元素按照規則橫向排列,但是父元素卻消失不見了。

float屬性不具有繼承特性,就是說子元素不會繼承父元素的浮動屬性,詳情參考css手冊 float版本:CSS1 兼容性:IE4+NS4+繼承性:無 語法: float:none|left|right 參數: none:對象不浮動 left:

 

}fload屬性有四個可用的值:Left 和Right 分別浮動元素到各自的方向,None(默認的)使元素不浮動,Inherit 將會從父級元素獲取float值。Float的用處除了簡單的在圖片周圍包圍文字,浮動可用于創建全部網頁

為父元素添加一個5px的邊框,在li元素添加浮動后,邊框并沒有被內容撐開。

第二個問題,float不會覆蓋元素,其他受影響的元素都會在他后面排列。如果按照你的說法會覆蓋的話,應該是用絕對定位,這樣會有多層覆蓋的效果。關于float建議你看《css權威指南》,里面講的特別清楚,

在第一個示例中仿佛父元素消失了,但在第二個示例中發現其實父元素并沒有消失,只是高度被計算為0。這就要回到浮動元素的特性來說明此問題“當元素設置浮動后,會自動脫離文檔流”,翻譯成白話就是說,元素浮動后,就不在整個文檔流的管轄范圍,那么它之前存在在父元素內的高度就隨著浮動不復存在了,而此時父元素會默認自己里面沒有任何內容(前提是未給父元素設置固定高度,如果父元素本身有固定高度,就不會出現這種情況)

clear:left;意思是相對前面的元素而言的,用于清除前面的float:left元素,不會加入浮動流,所以會換行 float:left 意思是相對自己來說的,自己向左浮動

解決方法:

1、給父元素也添加float。這樣讓父元素與子元素一起脫離文檔流浮動起來,保證子元素在父元素內,這樣父元素就能自適應子元素的高度,但是此方法有一弊端,一定會影響父元素之后的元素排列,甚至影響布局。

2、給父元素一個固定高度,此方法適用于子元素高度已知并且固定的情況。

3、添加一個塊級元素,并給此元素設置clear:both;清除浮動。在很早之前用的就是這種解決辦法,新建一個空的div,為這個div設置clear:both;這樣無疑是增加了無意義的標簽,一個大型頁面中,這種標簽太多是不好的。

4、給父元素添加 overflow:hidden;【后有詳解】

5、通過偽類::after清除浮動 【后有詳解】

overflow:hidden; 隱藏溢出,當內容超過其父元素時,可以使用該屬性和值將溢出的部分裁剪掉,使頁面更加美觀 清除浮動,當子元素浮動時,給父元素添加overflow:hidden,按照它的第一個特性,應該將子元素超出的部分截掉,但是因為子元素有浮動,無法裁剪,所有只能由父元素增加高度去包裹住子元素,使得父元素擁有了高度,而這個高度是跟隨子元素自適應的高度,這樣就把浮動的子元素包含在父元素內了。

::after 偽類

利用偽類來清楚浮動,其效果跟創建一個空的div并設置其為clear:both;是一樣的,只不過這里用偽類代替了空的div元素

<div class="box"> <div class="son">我是浮動的子元素</div></div>

.box { width:400px; background:#F00;}.son { float:left;}.son::after { content:""; clear:both;/*清除浮動*/ display:block;/*確保該元素是一個塊級元素*/}

到此這篇關于詳解關于浮動元素float使其父元素高度塌陷的原因及解決方法的文章就介紹到這了,更多相關浮動float父元素高度塌陷內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

雖然我也不懂這個,根據你說的情況,我還是查了下資料,是這樣解釋的。“當前塊級元素設置left浮動后,下一個不含left浮動緊鄰塊級元素會填充浮動元素遺留下來的空間,發生重疊,浮動層在上面。這和你說的不影響其他非浮動元素的意思相似。據此試了下,結果并不能實現以上說法。原因是:”因為占位空間層級的分界線和文檔流基線不是同一個“,說的什么意思我沒看懂。我的解決辦法是給和的父級容器加入position:relative;給p加入position:absolute;同時設置p的位置,如左上角top:0;left:0;此時不再影響內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • css高度塌陷問題的解決方案
  • 淺談css 高度塌陷問題
  • 父級元素未設置高度和寬度時高度塌陷問題的解決方法
  • float浮動不是不影響其他元素么 為什么p標簽的內容會變化位置
  • CSS中float屬性和浮動有什么區別
  • float浮動不是不影響其他元素么 為什么p標簽的內容會變化位置
  • CSS中float有什么用?浮動是什么意思?
  • css中浮動元素float的clear是取消了周圍元素浮動屬性還是像概念上說的周圍不許有浮動元素存
  • 在CSS中,子元素是否繼承父元素浮動的屬性...FLOAT屬性。
  • CSS浮動屬性Float到底什么怎么回事,下面詳細解釋一下
  • html/css的兩個問題,求助,謝謝!關于浮動float。
  • css中關于浮動屬性float的問題!謝謝!
  • css浮動元素float:left第二行為什么靠右了?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程高度塌陷父元素float淺談css 高度塌陷問題父級元素未設置高度和寬度時高度塌陷問題的解決方法css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css 實現漸變效果小結( linear-gradient線性漸變 和 r解決type=file 文件修改表單 名稱不能正常回顯的問題移動端前端適配方案(總結)css 橫向進度條和豎向進度條實現代碼css運用阿里巴巴矢量庫快速在對應位置加上好看的圖標詳解盒模型大小取決于它的padding,margin,border數css+svg實現b站充電效果的示例代碼css動畫實現領積分效果的思路詳解html/css中的空格處理及如何保留頁面中的空格css實現氣泡的小尖角效果
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果