html清除浮動的6種方法範例_CSS/HTML

使用display：inline-block會出現的情況：

1.使區塊元素在一行顯示
2.使內嵌支援寬高
3 .換行被解析了
4.不設定的時候寬度由內容撐開
5.在IE6,7下步支援區塊標籤

由於inline-block屬性換行的時候被解析（有間隙）故解決方法使用浮動float:left/right

使用浮動時出現的情況：

1.使塊元素在一行顯示
2.使內嵌元素支持寬高
3.不設定不寬高的時候寬度由內容撐開
4.換行不被解析（故使用行內元素的時候清除間隙的方法可以使用浮動）
5.元素添加浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或另一個浮動元素停止（文檔流是文檔中可顯示對像在排列時所佔用的位置）

複製程式碼 程式碼如下：

phpcnlt >

phpcn background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使區塊元素在一行顯示
2.使內嵌支援寬高3.換行被解析了
4.不設定寬度的時候寬度由內容撐開
5.在IE6,7下不支援區塊標籤
浮動:
1.使區塊元素在一行顯示
2.使內嵌支援寬高
3.不設定寬度的時候寬度由內容撐開
*/

div1

div2

phpcnltphp cngtphpcnspan2