|
為了測試CSS浮動屬性，我們需要一個作為容器的div。點(diǎn)擊后面的按鈕將容器div的背景設(shè)置為粉色。 在這個div的里面再嵌套一個div。點(diǎn)擊后面的按鈕將內(nèi)層div的背景色設(shè)置為黃色，并且將其寬度設(shè)置為300像素。 最后，再添加一個并列的內(nèi)部div，將它的背景設(shè)置為藍(lán)色，同樣設(shè)置為300像素寬。 代碼結(jié)構(gòu)如下： <div id="d"> <div id="d2"> …… </div> <div id="d3"> …… </div> </div> 我們可以觀察到，由于div是塊級元素，盡管容器div里有足夠的空間讓兩個內(nèi)部并列div顯示到一行，第二個內(nèi)部div仍然是自動換行后顯示。怎么可以讓div“見縫插針”呢？下面就讓我們來看看CSS的浮動屬性。 CSS浮動，floatfloat是CSS中非常重要和常用的一個屬性，這里我們就通過實(shí)驗(yàn)來看看float屬性的作用。我們首先給第一個內(nèi)部div設(shè)置一個float:left的屬性。 #d2{ float:left} 注意，此時原來在兩個內(nèi)部div中間的空隙已經(jīng)不見了。下面我們再來讓第二個內(nèi)部div同樣向左側(cè)浮動。不過需要注意，如果容器div內(nèi)的所有元素都浮動的話，會造成容器div所占有的面積變化，頁面內(nèi)的文字可能會很亂，做好心理準(zhǔn)備。重新刷新即可回復(fù)正常。 #d3{ float:left} 可以看到，當(dāng)內(nèi)部div2也想做浮動之后，它發(fā)現(xiàn)容器div內(nèi)第一行尚有足夠的寬度，便會盡量地靠過去。這就是float的作用。 float同樣可以取值“right”，表示向右浮動，而取值“none”則表示不浮動。 試著讓內(nèi)部div2向右側(cè)浮動。看看會有什么效果？ |
|
|
