當前位置：
首頁 >
一天搞定CSS： 浮动（float）与inline-block的区别--11
發布時間：2025/3/20
38
豆豆
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS： 浮动（float）与inline-block的区别--11
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
浮動：
使元素脫離文檔流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來。
inline-block:
inline-block是指行內塊元素，它具有行內元素和塊元素兩者的特點，可以實現對元素的有序排序。
兩者的區別
兩者主要區別在于當標簽的【高度不一致】時，體現出的差異
如果高度不一致的情況下，想讓他們按順序排列就可以選擇inline-block
1）浮動時代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>ul{width: 300px;font-size: 0;}li{list-style: none;width: 100px;height: 150px;background: green;font-size: 40px;text-align: center;line-height: 150px;color: #fff;float: left;/*float: right;*//*display: inline-block;*/}</style></head><body><!--如果高度不一至的情況下，想讓他們按順序排列就可以選擇inline-block--><ul><li>1</li><li style="height: 200px;">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body> </html>效果圖：
2）使用inline-block時代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>ul{width: 300px;font-size: 0;}li{list-style: none;width: 100px;height: 150px;background: green;font-size: 40px;text-align: center;line-height: 150px;color: #fff;/*float: left;*//*float: right;*/display: inline-block;}</style></head><body><!--如果高度不一至的情況下，想讓他們按順序排列就可以選擇inline-block--><ul><li>1</li><li style="height: 200px;">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body> </html>效果圖：
總結：
在浮動時，若第一個元素的高度大于第二個元素的高度，第三個元素浮動時，會與第二元素并排在一列中，這樣不能出現有序排列了。在inline-block時，就算第一個元素的高度大于第二個元素的高度，第三個元素也不會與第二個元素排在一列。【這里第一二三個元素，不是指第一二三個元素，只是為了說明三個元素的關系】總結
以上是生活随笔為你收集整理的一天搞定CSS： 浮动（float）与inline-block的区别--11的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS： 浮动（float）及文
- 下一篇： 一天搞定CSS： 浮动（float）的副