使用display：inline-block會出現的情況：1.使塊元素在一行顯示

2.使內嵌支持寬高

3.換行被解析了

4.不設置的時候寬度由內容撐開

5.在IE6,7下步支持塊標簽

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

使用浮動時出現的情況：

1.使塊元素在一行顯示

2.使內嵌元素支持寬高

3.不設置不寬高的時候寬度由內容撐開

4.換行不被解析(故使用行內元素的時候清除間隙的方法可以使用浮動)

5.元素添加浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或者另一個浮動元素停止(文檔流是文檔中可顯示對象在排列時所占用的位置)

無標題文檔

div,span{height:100px;background:red;border:1px solid #000; float:left;}

/*

inline-block

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.換行被解析了

4.不設置寬度的時候寬度由內容撐開

5.在IE6,7下不支持塊標簽

浮動:

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.不設置寬度的時候寬度由內容撐開

*/

div1div2

span1

span2

下面的代碼只有box1浮動，則box1，box2重疊一起。兩者都浮動就不會重疊

無標題文檔

.box1{ width:100px;height:100px;background:red; float:left;}

.box2{ width:200px;height:200px;background:blue; /* float:left;*/}

清浮動的方法：

1.給父級也加浮動(這種情況當父級margin:0 auto;時不居中)

無標題文檔

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮動

1.給父級也加浮動(不居中了)

*/

2.給父級加display:inline-block;(同方法1，不居中。只有IE6,7居中)

無標題文檔

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

*/

3.在浮動元素下加

無標題文檔

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;}

/*

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加

.clear{ height:0px;font-size:0;clear:both;}

*/

4.在浮動元素下加

無標題文檔

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

/*

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加

.clear{ height:0px;font-size:0;clear:both;}

4.在浮動元素下加

*/

5.給浮動元素父級加{zoom:1;}:after{content:""; display:block;clear:both;}

無標題文檔

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{content:""; display:block;clear:both;}

/*

清浮動

1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加

.clear{ height:0px;font-size:0;clear:both;}

4.在浮動元素下加

5. 給浮動元素的父級加{zoom:1;}

:after{content:""; display:block;clear:both;}

**在IE6，7下浮動元素的父級有寬度就不用清浮動

haslayout 根據元素內容的大小 或者父級的父級的大小來重新的計算元素的寬高

display: inline-block

height: (任何值除了auto)

float: (left 或 right)

width: (任何值除了auto)

zoom: (除 normal 外任意值)

*/

6.給浮動元素父級加overflow:auto;

無標題文檔

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}

總結

以上是生活随笔為你收集整理的html除左侧浮动,html清除浮动的6种方法示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。