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