css div 清理浮動的2種方法

2022-02-20 03:22:25 字數 1068 閱讀 6214

使用float屬性,導致div的內容發生浮動,浮動帶來負影響:

1、背景不能顯示 2、邊框撐不開 3、div的padding和margin不能起作用;

處理float浮動的兩種方式:

1、div的子類中增加乙個div,設定div中的clear:both,不允許左右兩邊存在浮動;

css:

.divcss5 

.divcss5-left,.divcss5-right

.divcss5-left

.divcss5-right

.clear

html:

<

div

class

="divcss5"

>

<

div

class

="divcss5-left"

>left浮動

div>

<

div

class

="divcss5-right"

>right浮動

div>

<

div

class

="clear"

>

div>

div>

2、div的樣式中新增屬性,overfloaw:hidden;

css:

.divcss5 

.divcss5-left,.divcss5-right

.divcss5-left

.divcss5-right

html:

<

div

class

="divcss5"

>

<

div

class

="divcss5-left"

>left浮動

div>

<

div

class

="divcss5-right"

>right浮動

div>

div>

清理浮動的方法

1.clear屬性 屬性值 left right both none 表示框的哪些邊不能挨著浮動框 新增乙個空元素並清理它 news news img news p clear text 新增乙個 或其他的,新增clear屬性,清理它上面的浮動元素,both即清理左浮動和右浮動 缺點 新增了不必要的...

清除浮動的八種方法

清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全,共8種方法。浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法...

清除浮動的9種方法

1 父級div定義heigh 原理 父級div手動定義height,就解決了父級div無法自動獲取到高度的問題 優點 簡單,少,容易掌握 缺點 只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題 建議 不推薦使用,只建議高度固定的布局時使用 2 結尾處加空div標籤cl...