浮動的消除

2021-09-01 02:33:51 字數 1178 閱讀 8233

當divouter內有乙個divinner,divinner如果設定了浮動後,divouter的大小會變得不受divinner影響,此刻就需要消除divinner的浮動效果

方法:給divouter設定overflow: hidden

overflow: hidden; 是指溢位部份隱藏,但卻能清除浮動。

給divouter設定高度

這需要在知道divinner高度的情況下

使用clear屬性

clear是讓自己在布局的時候無視周圍(left/right/both)元素的浮動效果。

在上面案例的divinner旁邊加乙個空div,無內容,設定clear: left; 則該div會無視自身左邊的元素的浮動效果進行布局。那麼因為div的特性會自動換行,所以該div會去到了下一行,但因為其內容是空的,所以高度是0,那麼此時divouter的高度會因為空div不是浮動的,那麼就會變成divinner的高度再加上空div的高度(0px),也就消除了浮動。

.divinner

class

="divouter"

>

class

="divinner"

>

divinnerdiv

>

style

="clear

: left;

">

div>

div>

使用偽類設定clear

該方法跟上面的clear: left;一致,只不過不是手動新增div,而是使用偽類新增。

.divinner

.clearfloat:after

class

="divouter clearfloat"

>

class

="divinner"

>

divinnerdiv

>

div>

這樣,只要加了clearfloat這個class,他的子元素末尾就會自動新增乙個clear: left;的空的div

上面的方案對現代瀏覽器是可行的。但如果要相容ie6、7的話,那就應該使用haslayout的方式了,這裡不做講解。

div標籤消除浮動

1 第乙個div 第二個div 1 的截圖為,可以看到,id2和id3並沒有在id1中。這就是沒有清除浮動的效果。清除浮動的方法 1 對父級設定合適的高度 對父級設定合適的高度進行清除浮動,父級內內容的高度為20px 2px 22px,在id1中增加樣式height 22px 即可。效果圖 缺點 對...

踩坑 消除浮動

又遇到了浮動問題,有一點點收穫,雖然還不完整,以後再補充 先給出乙個浮動的栗子 使用 clear 屬性來消除浮動 w3c 上 clear 的說明 clear 屬性定義了元素的哪邊上不允許出現浮動元素,如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下 上圖的情況,...

CSS如何消除浮動

當我們布局網頁一般是先分成乙個乙個div區域,再逐一雕琢。但div預設行為 寬100 多個div從上到下 在一些場景卻不太適合,需要搭配float使用。浮動 float,浮動會脫離預設的文件流,浮動層和預設文件層就好像ps工具中的兩個圖層,互相不搭理 如果div容器不設定width 寬度由預設100...