利用css清除浮動的方法

2021-08-03 12:28:54 字數 420 閱讀 8342

在網頁搭建過程中,浮動是布局中必不可少的。但是當子元素浮動後,其父級元素就會出現高度不夠的情況。這時候,我們需要去清除浮動。下面,我就總結了一些清除浮動的方法。

1、新增乙個空的div,給這個空的div設定css屬性即:clear:both。這樣的方法瀏覽器相容比較好,而且比較簡單。但是這樣做頁面中就會出現很多空的div。

2、在包含浮動元素的父元素上增加類。然後在公共樣式的css檔案中給此類設定css屬性。即:.clearfloat:after

.clearfloat

這樣即清除了浮動。頁面中又不會出現空的div.寫在公共樣式檔案中的話,減少了**量。

3、給要浮動的元素的float:left或者float:right修改為display:inline-block.也可以解決浮動問題。

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...