說一說浮動(dòng)?
得分點(diǎn):脫離文檔流、盒子塌陷、影響其他元素排版、偽元素、overflow:hidden、標(biāo)簽插入法。
回答:浮動(dòng)的作用有:設(shè)置浮動(dòng)的圖片,可以實(shí)現(xiàn)文字環(huán)繞圖片。設(shè)置了浮動(dòng)的塊級(jí)元素可以排列在同一行。設(shè)置了浮動(dòng)的行內(nèi)元素可以設(shè)置寬高,同時(shí)可以按照浮動(dòng)設(shè)置的方向?qū)R排列盒子。
設(shè)置浮動(dòng)元素的特點(diǎn):設(shè)置了浮動(dòng),該元素脫離標(biāo)準(zhǔn)流,元素不占位置。浮動(dòng)可以進(jìn)行模式轉(zhuǎn)換(行內(nèi)塊元素)浮動(dòng)造成的影響,使盒子脫離文檔流,如果父級(jí)盒子沒有設(shè)置高度,需要被子盒子撐開,那么這時(shí)候父級(jí)盒子的高度就塌陷了,同時(shí)也會(huì)造成父級(jí)盒子后面的兄弟盒子布局受到影響,如果浮動(dòng)元素后面還有其他兄弟元素,其他兄弟元素的布局也會(huì)受到影響。
清除浮動(dòng)的方法:
????(1)偽元素清除浮動(dòng):給浮動(dòng)元素父級(jí)增加。
????(2)overflow:hidden:給父元素增加overflow:hidden屬性。
????(3)額外標(biāo)簽法:給浮動(dòng)元素父級(jí)增加標(biāo)簽。
加分回答:三種清除浮動(dòng)方法的特點(diǎn)和影響:偽元素清除浮動(dòng)不會(huì)新增標(biāo)簽,不會(huì)有其他影響,是當(dāng)下清除浮動(dòng)最流行的方法。overflow:hidden不會(huì)新增標(biāo)簽,但是如果父級(jí)元素有定位元素超出父級(jí),超出部分會(huì)隱藏,在不涉及父級(jí)元素有超出內(nèi)容的情況,overflow:hidden比較常用,寫法方便簡潔。標(biāo)簽插入法清除浮動(dòng)的語法加在新增標(biāo)簽上,由于新增標(biāo)簽會(huì)造成不必要的渲染,所以這種方法目前不建議使用。