清除浮動多種方法模擬

2021-07-27 22:26:10 字數 1078 閱讀 4855

方法一

父級設定固定高度。注:適用於高度固定時使用

class="div1">

class="left">leftdiv>

class="right">rightdiv>

div>

class="div2">

div2

div>

.div1

.left

.right

.div2

方法二

在浮動結尾處新增空div,使用clear:both;清除掉浮動。注:頁面浮動布局偏多,使用起來不夠簡潔

class="div1">

class="left">leftdiv>

class="right">rightdiv>

class="clearfix">

div>

div>

class="div2">

div2

div>

.clearfix

方法三

父級新增偽類 after進行清除浮動,例如:display:block;clear:both;content:"";

.div1

:after

方法四

父級新增樣式overflow:hidden; 或者 overflow:auto;貌似 overflow:overlay;也可以。

新增 overflow 屬性後,浮動元素又回到了容器層,把容器高度撐起。

.div1

方法五

父級新增樣式diaplay: table;

.div1

css清除浮動各種方法

1,在浮動元素後面增加 標籤 標籤有自帶的清除浮動屬性 2,在浮動元素後面增加乙個清除浮動層 3,給浮動元素新增overflow auto樣式 4,為最後浮動元素設定如下樣式 清理浮動 clearfix after clearfix 其原理是,在 高階 瀏覽器中使用 after 偽類在浮動塊後面加上...

清除浮動的幾種方法

1.浮動元素下加空div 為了統一樣式,我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動,可以不用對父級設定高度 也無需技術父級高...

清除浮動的幾種方法

當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。浮動帶來的影響 1,父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元...