浮動

浮動就是讓設置的標籤產生浮動效果，就是脫離原來頁面的標準輸出流。正常狀況下，HTML頁面中塊元素都是從上倒下排列的。若是想實現左右結構。能夠使用float。好比<div style="widht:500px"><div style="float:left;width:200px">左</div><div style="float:left;width:200px">右</div></div>這樣，這個兩個DIV標籤就在同一行上了（同時靠左），固然有個前提，就是他們倆的父元素的寬度要至少大於400px，這樣才能在同一行上。這個結果是兩個DIV的右側會空出100PX的空白<div style="widht:500px"><div style="float:left;width:200px">左</div><div style="float:right;width:200px">右</div></div>以上寫法，也是在同一行。不一樣的是，一個靠左，一個靠右。這裏邊的兩個DIV的中間有100PX的空白。須要注意的是，當標籤使用了float屬性後，就脫離了標準輸出流，就不受頁面約束了。這樣不方便，也不利於佈局。因此，通常浮動以後要清除浮動。<div style="widht:500px"><div style="float:left;width:200px">左</div><div style="float:right;width:200px">右</div><span style="clear:both"></span>/*清除浮動*/</div>這樣，頁面總體的佈局結構就基本上沒有被破壞了。浮動的：當浮動一個文本類型元素時，若是沒有設定width寬度，元素內容就會摺疊到最小寬度；　　　　當float不爲none時，浮動元素被視爲塊級；　　　　浮動元素停留到包含它的父級元素的內容區域內，不會穿過padding區域；　　　　浮動元素的margin不會重合。