摘要:浮動的框可以左右移動即,直到它的外邊緣碰到包含框或另一個浮動框的邊緣。屬性的值可以是或,它表示框的哪些邊不應該挨著浮動框。在清理元素時,瀏覽器在元素添加足夠的外邊距,使元素的頂邊緣垂直下降到浮動框下面。
眾所周知,浮動模型是一種可視化格式模型。浮動的框可以左右移動(即:float:left;float:right),直到它的外邊緣碰到包含框或另一個浮動框的邊緣。浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現得就像浮動框不存在似的。
</>復制代碼
.wrapper{
border:5px solid #000;
/*height:300px;*/
}
ul{
margin:0;
padding:0;
/*height:300px;*/
border:1px solid #f00;
/*float:left;*/
}
li{
float:left;
height:100px;
list-style:none;
padding:5px 10px;
}
清除浮動的方法:
要想阻止行框圍繞在浮動框的外邊,需要對包含這些行框的元素應用clear屬性。clear屬性的值可以是left、right、both或none,它表示框的哪些邊不應該挨著浮動框。在清理元素時,瀏覽器在元素添加足夠的外邊距,使元素的頂邊緣垂直下降到浮動框下面。
浮動元素脫離了文檔流,不影響周圍的元素。但是,對元素進行清理實際上為前面的浮動元素留出了垂直空間。
方法一:在浮動的元素后添加一個帶有clear屬性的塊狀元素。
</>復制代碼
.clear{
clear:both;
}
這會實現我們希望的效果,但是要添加不必要的代碼,沒有意義的標簽代碼。
方法二:使用偽類選擇器:after
方法三:利用overflow:hidden或auto的副作用,會自動地清理抱恨的任何浮動元素。在浮動的父塊狀元素設置屬性overflow:hidden或auto;
這是一種有用的元素清理方法,不需要添加額外的標記。這個方法并不適合所有情況,因為設置框的overflow會影響它的表現。更具體地說,這種方法在某些情況下回產生滾動條或者截斷內容。
方法四:如果子元素內容固定,可以對父級元素設置合適的高度。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115223.html
摘要:網頁布局中經常會用到浮動,但是浮動的塊級元素脫離了標準文檔流,使得浮動元素的父元素沒有高度,導致父級元素沒有高度,所以需要清除浮動對父級元素的影響,本文介紹清除浮動的幾種方法。 網頁布局中經常會用到float浮動,但是浮動的塊級元素脫離了標準文檔流,使得浮動元素的父元素沒有高度,導致父級元素沒有高度,所以需要清除浮動對父級元素的影響,本文介紹清除浮動的幾種方法。 清除浮動影響的幾種方法...
摘要:而在文檔流中,如果浮動元素和跟隨元素都是元素,它們兩在默認情況下都將占據一行。而由于浮動元素脫離了文檔流,如果父元素沒有指定高度或者其他元素撐起,也就出現了所謂的浮動元素的父元素高度塌陷。 為什么要寫《重塑你的CSS世界觀》系列文章 由于從工作到現在,我的主要工作都是寫JavaScript,幾乎沒怎么碰CSS,通常都是別人寫好界面,然后我來開發JavaScript邏輯代碼,這導致了嚴重...
摘要:而在文檔流中,如果浮動元素和跟隨元素都是元素,它們兩在默認情況下都將占據一行。而由于浮動元素脫離了文檔流,如果父元素沒有指定高度或者其他元素撐起,也就出現了所謂的浮動元素的父元素高度塌陷。 為什么要寫《重塑你的CSS世界觀》系列文章 由于從工作到現在,我的主要工作都是寫JavaScript,幾乎沒怎么碰CSS,通常都是別人寫好界面,然后我來開發JavaScript邏輯代碼,這導致了嚴重...
摘要:解決辦法添加復制內容到剪貼板一行右側第一個元素有雙邊距一行左側第一個元素有雙邊距在,下,自身沒浮動,但是的內容有浮動,下邊就會產生一個間隙解決辦法給加浮動給加注意當下最小高度問題,和的間隙問題共存的時候,給加浮動才能解決。目前主流瀏覽器的兼容性做的都比較好了,本文主要針對IE6,7的不兼容問題進行解決。 1.圓盤時鐘有浮動存在時,計算一定要精確,不要讓內容的寬高超出我們所設置的寬高,IE6下...
閱讀 1052·2021-11-22 15:35
閱讀 1692·2021-10-26 09:49
閱讀 3236·2021-09-02 15:11
閱讀 2082·2019-08-30 15:53
閱讀 2639·2019-08-30 15:53
閱讀 2920·2019-08-30 14:11
閱讀 3532·2019-08-30 12:59
閱讀 3244·2019-08-30 12:53