一蛮位、浮動(dòng)元素有什么特征?對(duì)其他浮動(dòng)元素鳞绕、普通元素失仁、文字分別有什么影響?
浮動(dòng)元素會(huì)浮動(dòng)到左或右依次排列,直到空間不足排列到下一行们何。
浮動(dòng)元素的寬度會(huì)收縮萄焦,周圍的文字會(huì)自動(dòng)環(huán)繞浮動(dòng)元素,下方塊級(jí)元素會(huì)上移占據(jù)浮動(dòng)元素的位置冤竹。
二拂封、清除浮動(dòng)指什么? 如何清除浮動(dòng)?
- 清除浮動(dòng)
在非IE瀏覽器(如Firefox)下,當(dāng)容器的高度(height) 為auto鹦蠕,且容器的內(nèi)容中有浮動(dòng)(float為left或right)的元素冒签,在這種情況下,容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度钟病,使得內(nèi)容溢出到 容器外面而影響(甚至破壞)布局的現(xiàn)象萧恕。這個(gè)現(xiàn)象叫浮動(dòng)溢出,為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理肠阱,就叫CSS清除浮動(dòng)票唆。
- 清除浮動(dòng)的方法:
-
clear
:清除元素周圍的浮動(dòng)
清除元素自身周圍的浮動(dòng),給元素添加clear: left;
屹徘,clear: right
或clear: both
-
在浮動(dòng)元素后加一個(gè)空元素走趋,并設(shè)置
clear: left;
,clear: right
或clear: both
-
overflow
:給包含有浮動(dòng)元素的父元素噪伊,添加overflow: hidden
-
clearfix
:給包含有浮動(dòng)元素的父元素添加clearfix
樣式
.clearfix:after {
content:" ";
display:block;
height:0;
clear:both;
}
.clearfix {zoom:1;}/IE/7/6*/
-