浮動的清除

? ? 直接在浮動元素下加一個盒子,使盒子的寬高和浮動元素寬高相同即可。

? ? ?可以給下邊的盒子添加clear屬性,這樣,就可以有選擇性的去處浮動,取值有如下幾個

①none系統默認的屬性

②left/right

③both在企業開發中最常用的

㈢內外墻法,說白了就是給結構添加樣式,即給結構添加一個塊集元素,然后設置塊集元素的屬性值為clear:both這樣即可。

注意點有

①外墻法是不可以給上一個元素設置margin_bottom屬性的,只可以給下邊的元素設置margin_top屬性。而內墻法沒有這個問題。

②內墻法可以撐起上一個元素的高度,而外墻法是不可以的。

注意

在企業開發中是不常用內外墻法清除浮動的,因為這樣額外增加了代碼的可讀性,

㈣利用偽元素選擇器和內墻法結合使用,符合前端結構和樣式分離的思想

格式為

.需要添加的元素::before

.需要添加的元素::after{

? ? ? ?content:

? ? ? ? display:

? ? ? ?visibility: hidde;

? ? ? ?clear:both

}

注意

由于偽類選擇器是css3 剛推出來的,所以原來的瀏覽器是不支持這種格式的如果想讓這種格式可以運行,那么就在他后邊再加這樣的代碼

.需要添加的元素{

? ?*zoom:1;

}

①overflow:hidden也可以去除浮動。但是涉及到兼容問題,所以一般情況下需要在有些情況下是可以添加上*zoom:1;

②兩個盒子是嵌套關系,但是不想給外邊的盒子添加邊框,并且想要內部的盒子可以設置margin-top屬性,那么可以在大盒子里加上overflow:hidden

③可以裁剪掉超出標簽的內容。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 盒子的高度問題 1.標準流中盒子的高度可以被內容高度撐起來;2.浮動流中浮動的內容不能撐起盒子的高度; 為什么要清...
    壹點微塵閱讀 397評論 0 0
  • # 網頁的布局方式(標準流/浮動流/定位流) # 浮動元素的脫標 # 浮動元素排列規則 # 貼靠現象 # 清除浮動...
    KsKison閱讀 1,623評論 0 1
  • 一朵潔白的云, 躺在天的蔚藍里, 詩意被風,吹來吹去, 有時染墨清晨的霞光, 有時暈醉落日的黃昏, 高興時,以天的...
    詩與遠方工作室閱讀 173評論 0 0
  • 跪在神的腳下,一雙手 磨破這一路的身影 徒步的心?。∮谛叛?,于生命 最虔誠的膜拜 **** 佛祖與眾生,塵土不過五...
    竹鴻初閱讀 559評論 14 11