CSS之浮動心得

2021-10-03 16:44:47 字數 1353 閱讀 2944

為什麼清楚浮動???

答:由於浮動元素不再占用原文件流的位置,所以它會對後面的元素排版產生影響,為了解決這些問題,此時就需要在該元素中清楚浮動。

清楚浮動的本質主要是為了解決父級元素因為子級浮動引起內部高度變為0的問題(因為父盒子沒有設定高度,當子盒子浮動後,父盒子就不能被撐起來了)。

額外標籤法

在css中,clear屬性用於清除浮動,w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤

.a

屬性值

描述left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

優點:通俗易懂,書寫方便

缺點:新增許多無意義的標籤,結構化比較差。

父級新增overflow屬性方法

可以通過觸發bfc的方式,可以實現清除浮動效果

overflow

: hidden | auto | scroll

優點:**簡潔

缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。

使用after偽元素清除浮動

:after 方式為空元素的公升級版,好處是不用單獨加標籤了

使用方法:

.clearfix: after

.clearfix

"father clearfix">

"big">

"small">

優點:符合閉合浮動思想 結構語義化正確

缺點:由於ie6-7不支援:after ,使用zoom:1觸發haslayout

注意: content:"." 裡面盡量跟乙個小點,或者其他,盡量不要為空,否則再firefox 7.0前的版本會有生成空格。

使用before和after雙偽元素清除浮動

使用方法:

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

優點:**簡潔

缺點:由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

CSS布局之浮動 清除浮動

1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行,使得浮動成為布局的重要手段。可...

CSS之清除浮動

標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單,少,瀏覽器相容性好。缺點 需要新增大量無語義的html元素,不夠優雅,後期不容易維護。在浮動元素下加 clear,但是在ie6下,塊元素有最小高度,即當hei...

css布局之浮動

css布局中說到浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動 框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。一float屬性的定義和用法 float屬性 設定元素浮動 可能的值 none 不浮動,在文件流內,預設 left ...