因?yàn)榫W(wǎng)頁布局,是一個(gè)復(fù)雜的過程,可理解為,都是由一個(gè)個(gè)div拼湊成的!那么,全部浮動(dòng)的話,將會(huì)面臨一個(gè)問題,那就是,所有的div都不在同一文本流中了,所以,就必須要限制一些div的浮動(dòng)。div浮動(dòng)的原理,該浮動(dòng)的就選擇浮動(dòng),不該浮動(dòng)的,就不浮動(dòng)!
一般浮動(dòng)是什么情況呢?一般是一個(gè)盒子里使用了CSS float浮動(dòng)屬性,導(dǎo)致父級對象盒子不能被撐開,這樣CSS float浮動(dòng)就產(chǎn)生了。本來兩個(gè)黑色對象盒子是在紅色盒子內(nèi),因?yàn)閷蓚€(gè)黑色盒子使用了float浮動(dòng),所以兩個(gè)黑色盒子產(chǎn)生了浮動(dòng),導(dǎo)致紅色盒子不能撐開,這樣浮動(dòng)就產(chǎn)生了。簡單地說,浮動(dòng)是因?yàn)槭褂昧薴loat:left或float:right或兩者都是有了而產(chǎn)生的浮動(dòng)。
通常有兩種方法解決此問題:
一、添加一個(gè)無任何內(nèi)容的div并對它做浮動(dòng):
<div class="clear"></div>
.clear{
clear: both;
}
這是為了布局效果而添加的無意義的標(biāo)簽,事實(shí)上很多網(wǎng)站也采取了這種策略,但這種策略會(huì)留下無意義的“垃圾”標(biāo)簽。
二、對容器DIV也進(jìn)行浮動(dòng),使之成為一個(gè)塊級元素。
如此一來達(dá)到了目的,但下一個(gè)元素會(huì)受到該浮動(dòng)元素的影響。事實(shí)上,有人采取的策略是將文檔中所有的元素都進(jìn)行浮動(dòng)處理,然后在頁腳的地方對有意義的元素對這些浮動(dòng)進(jìn)行清理,以達(dá)到布局的目的。