浮動:
在非ie瀏覽器下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢位,為了防止這個現象的出現而進行的css處理,就叫css清除浮動。
未清除浮動的情況:
清除浮動的第一種方法:使用clear屬性的空元素(這裡用的是div,其它均可)
清除之後的效果:
第二種方法:給浮動元素的父元素容器新增overflow:hidden(auto)另外在 ie6 中還需要觸發 haslayout ,例如為父元素設定容器寬高或設定 *zoom:1。
doctype html第三種方法:使用:after偽元素法(在浮動元素的父元素新增乙個屬性clearfix)>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.parent
.clear
.box
.next
style
>
head
>
<
body
>
<
div
class
="parent clear"
>
<
div
class
="box"
>
div>
<
div
class
="box"
>
div>
<
div
class
="box"
>
div>
div>
<
div
class
="next"
>
div>
body
>
html
>
doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.parent
.clearfix:after
/*.clearfix
*/.box
.next
style
>
head
>
<
body
>
<
div
class
="parent clearfix"
>
<
div
class
="box"
>
div>
<
div
class
="box"
>
div>
<
div
class
="box"
>
div>
div>
<
div
class
="next"
>
div>
body
>
html
>
浮動 清除浮動
在css布局中分為內聯元素 display inline 和塊狀元素 display block 塊狀元素缺省會佔據一行,可設定高度寬度以及邊距,而內斂元素不會也不能設定。常見的內斂元素有 a span input select,常見的塊狀元素有 h1 h6,p,div,ul,table。浮動元素是...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...