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