由以上區塊的呈現方式，如果遇到區塊A與區塊B的高度不一定相同的時候，很可能會造成底線無法順利呈現而造成板面跑掉的窘境，有兩個解決方式，一個是將主要的 div 區塊設定一個高度，但這並不是非常好的方式，如果區塊A或區塊B有任何一筆資料超過主區塊的高度一樣會出問題，所以我們建議用另一個方式解決，那就是 clear:both。



如此一來  float 所造成的影響將停留在兩個區塊的部分，主要的 div 區塊一樣會自動判斷高度囉！

延伸閱讀

• CSS DIV 區塊
• CSS float 浮動
• CSS display:inline-block 可設定區塊寬度與高度

您可能會想看

• 如何替 HTML DIV 區塊增加邊框效果
• 如何在 HTML DIV 區塊內插入圖片
• 如何修改 HTML DIV 區塊內的文字顏色
• CSS display:inline-block 可設定區塊寬度與高度
• 利用 CSS 設計 ul li 橫向水平顯示
• CSS list-style-type 列表開頭顯示符號
• CSS list-style-image 列表開頭顯示圖示
• CSS list-style-position 列表位置
• CSS list-style 列表設計
• 修改 CSS DIV 內文字字型

即時熱門文章

• 如何替 HTML DIV 區塊增加邊框效果
• 如何在 HTML DIV 區塊內插入圖片
• 如何修改 HTML DIV 區塊內的文字顏色
• HTML span 標籤用法
• 如何修改 HTML DIV 區塊內的文字字型
• 如何替 HTML DIV 增加背景顏色
• HTML DIV 標籤用法
• PHP stripslashes 函數
• PHP strip_tags 函數消除 PHP 或 HTML 標籤符號
• PHP addslashes 函數替字符增加斜線

今日熱門文章

• 如何替 HTML DIV 區塊增加邊框效果
• 如何在 HTML DIV 區塊內插入圖片
• 如何修改 HTML DIV 區塊內的文字顏色
• HTML span 標籤用法
• 如何修改 HTML DIV 區塊內的文字字型
• 如何替 HTML DIV 增加背景顏色
• HTML DIV 標籤用法
• PHP stripslashes 函數
• PHP strip_tags 函數消除 PHP 或 HTML 標籤符號
• PHP addslashes 函數替字符增加斜線