css 清除浮動的方法

2021-09-29 14:25:48 字數 1219 閱讀 4493

不新增清除浮動的時候：這裡我沒有給最外層的div.outer 設定高度，但是我們知道如果它裡面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後，就出現了一下影響：


（1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設定值不能正確顯示




清除浮動方法1：新增新的元素，給他的css 新增clear:both
在浮動元素的父級內部所有浮動元素的後面乙個空標籤，給他的樣式寫clear:both;


弊端：新增了新的無意義的標籤


.claer
方法二：父級div定義 overflow: auto或者hidden（注意：是父級div也就是這裡的  div.outer）

此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意**的弊端。

不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；

.over-flow


方法三： 據說是最高大上的方法:after 方法：（注意：作用於浮動元素的父親）
先說原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入乙個div.clear標籤，而outer利用其偽類clear:after在元素內部增加乙個類似於div.clear的效果。下面來看看其具體的使用方法： 　　

.outer


.outer:after


其中clear:both;指清除所有浮動；content: '.'; display:block;對於ff/chrome/opera/ie8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。

css清除浮動方法

html 浮動 不想被浮動影響 css wrap float nofloat 現在雖然加了乙個空的div，但是並沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。ok，現在給.clear加上清除浮動 clear ps 這種情況比較適合元素之間是垂直排列布局的，為了不...

css 清除浮動方法

1 額外標籤法 隔牆法 style clear both div 2 父級 overflow hidden style overflow hidden div 3 父級 after 偽元素 clearfix after clearfix 4 父級雙偽元素 clearfix before,clearf...

CSS清除浮動的方法

給元素設定了float屬性後脫離了文件流，不佔據位置，所以其父級無法將其包裹，需要清除浮動。段 box item style class box class item div div 效果 方法一 給父級設定高度 段 box 問題解決 缺點 擴充套件性不好，沒有解決根本問題 方法二 給父級加上flo...