float屬性的值可以是left、right或者none。
用兩個例子來說明吧:
1 **混排
causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...
#picture
2 一行兩列
xhtml**:
example source code
這裡是第一列
這裡是第二列
/*這是違背web標準意圖的，只是想說明在它下面的元素需要清除浮動*/
css**:
example source code
#wrap
#column1
#column2
.clear
一般地,float要和clear一起使用!
css屬性clear用於控制浮動元素的後繼元素的行為。
預設地，後繼元素將向上移動，以填補由於前面元素的浮動而空出的可用空間。在前面的例子中，文字自動上移到了比爾蓋茨的旁。
clear屬性的值可以是left、right、both或none。原則是這樣的：如果乙個盒子的clear屬性被設為「both」，那麼該盒子的上邊距將始終處於前面的浮動盒子（如果存在的話）的下邊距之下。
顯然，float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float布局！
兩行一列
example source code
body
#content-top
#content-end
三行一列
example source code
body
#content-top
#content-mid
#content-end
單行兩列
example source code
#bodycenter
#bodycenter#dv1
#bodycenter#dv2
兩行兩列
example source code
#header
#bodycenter
#bodycenter#dv1
#bodycenter#dv2
三行兩列
example source code
#header
#bodycenter
#bodycenter#dv1
#bodycenter#dv2
#footer
單行三列
絕對定位
example source code
#left
#middle
#right
float定位一
xhtml**:
example source code
這裡是第一列
這裡是第二列
/*用法web標準不建議，但是記住下面元素需要清除浮動*/
這裡是第三列
/*用法web標準不建議，但是記住下面元素需要清除浮動*/
css**:
example source code
#wrap
#column
#column1
#column2
#column3
.clear
css**：
example source code
body{
margin:0;
padding-left:200px;/*lcfullwidth*/
padding-right:190px;/*rcfullwidth ccpadding*/
min-width:200px;/*lcfullwidth ccpadding*/
.column{
position:relative;
float:left;
#center{
width:100;
#left{
width:200px;/*lcwidth*/
right:200px;/*lcfullwidth*/
margin-left:-100;
#right{
width:190px;/*rcwidth*/
margin-right:-100;
css中的浮動元素float
浮動屬性作為css的重要屬性，被頻繁地應用在網頁製作中。所謂元素的浮動時指設定了浮動屬性的元素會脫離標準文件流的控制，移動到其父元素中相應位置的過程，float屬性的基本語法格式是 選擇器left 元素向左浮動 right 元素向右浮動 nons 元素不浮動，預設值 使用clear屬性清除浮動 使用...
CSS之float浮動元素定位機制
1 6個子容器未設定浮動的狀態如下 子容器1 子容器2 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水...
前端CSS部分 重新認識浮動float
1 浮動產生的背景 1 1 為什麼會出現浮動呢？浮動最初出現的時候只是為了實現文字環繞的效果。並沒有想過它可以應用於我們現在的頁面布局中。1 2 文字環繞的原理 在沒有設定浮動的時候，元素可以通過自身的寬高值，將盒模型中的父元素的寬高給撐開。元素設定浮動之後，破壞了其inline boxes模型，失...