1:讓父元素也一起浮動:經測試該方法可行,而且四周全部包住,非常嚴實.但是如果當前的子項目有多個父級的話,
那麼每個父級元素都要設定浮動,甚至要一直寫到<body>,所以該方法pass。
2.給父元素設定溢出隱藏屬性:同樣也可實現要求,但這種方法有很多相容性問題,大家課後可多開啟幾個瀏覽器測試
3.給當前的父元素中添加一個空的塊元素,這個新元素只做一件事,清除它周圍的浮動元素
經測試也能實現要求,這種方法是最簡單最直觀,而且沒有任何相容問題,但卻有一個致命的問題,
那就是給當前的子項目列表中添加了一個無用的元素,當我們用js和php等指令碼語言進行資料遍曆的時候會非常麻煩
因為這個元素並不是我們需要的,必須單獨的進行處理,那麼有沒有一種二全其美的方案:即保證相容性,又不用添加新元素呢?
有,用我們之前學過的虛擬元素來解決。
4. 給父元素添加:after偽類,在後面添加一個空元素,直接設定它的屬性即可;
<html><head><meta charset="UTF-8"><title>7.層次元素之間的清除浮動的技巧</title><style type="text/css">.parent {background-color: lightskyblue;border: 2px solid red;/*讓父元素一起浮動,讓它包住浮動的子項目*//*float:left;*//*給父元素設定內容溢出隱藏功能*//*overflow: hidden;*/}.parent:after {/*1.添加一個空元素*/content: '';/*2.預設為行內元素,所以要轉為塊元素*/display: block; /*3.直接清除二邊的浮動*/clear: both;/*如果ie下顯示有問題,可以加上*//*z-index: 1;*//*可能你看過有的地方是這樣寫的:*//*添加一個空格*//*content: '\0020';*//*然後讓這個空格高度為0,這樣就根本不會顯示出來*//*height: 0;*/}.child {width: 200px;height: 200px;background-color: lightgreen;/*設定提示文本的水平垂直置中*/text-align: center;line-height: 200px;/*當前父元素沒有聲明寬高,它是由子項目的寬高撐起來的*//*下面我們將子項目進行浮動,你將會看到非常有意思的事情發生*/float:left;/*結果你會發現,子項目浮動之後,脫離了文檔流,它與原來的父級元素就沒有了關聯,所以父級直接壓縮了,無法再包住子項目*/}.clear {clear: both;}</style></head><body><div><div>子項目</div><!-- <div></div> --></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
