jQuery Tab 切換時內容區域高度塌陷導致元素跑出邊框：CSS overflow 修復方案

問題現象

• 默認 Tab 內容正常顯示在邊框內
• 切換 Tab 後，內容區域高度變為 0，子元素（float 左浮動）跑出邊框外

根本原因

Tab 面板容器 #tab_panel 內的子元素使用 float: left，導致父容器**高度塌陷**（無法被撐開）。切換顯示/隱藏時，未觸發重新計算高度。

CSS 代碼片段（問題版）

#dialog_select_blocks2 #block_tabs #tab_panel {
    width: 480px;
    clear: both;
    padding: 5px 0;
    /* 缺少清除浮動機制 */
}

#dialog_select_blocks2 #block_tabs #tab_panel div {
    display: inline-block; /* 此處無效，子元素是 float */
}

#dialog_select_blocks2 #block_tabs #tab_panel div ul li {
    float: left; /* 罪魁禍首 */
    width: 100px;
    ...
}

修復方案

方案一：overflow: auto / hidden（最簡單，推薦）

#dialog_select_blocks2 #block_tabs #tab_panel {
    clear: both;
    padding: 5px 0;
    width: 480px;
    overflow: auto;   /* 觸發 BFC，包含浮動子元素 */
    zoom: 1;          /* IE6/7 兼容 hasLayout */
}

方案二：clearfix 偽元素（現代標準）

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
/* HTML 添加 class */
<div id="tab_panel" class="clearfix">...</div>

方案三：Flexbox 佈局（徹底避免 float）

#dialog_select_blocks2 #block_tabs #tab_panel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 替代 margin */
    padding: 5px;
}

#dialog_select_blocks2 #block_tabs #tab_panel div ul li {
    /* 移除 float: left */
    width: 100px;
    height: 24px;
    line-height: 24px;
    /* 其餘樣式保持 */
}

jQuery 切換邏輯優化

$(function() {
    $("#block_tabs #tab_opt li").on("click", function() {
        var $this = $(this);
        var index = $this.index();
        
        $this.addClass("selected").siblings().removeClass("selected");
        
        // 使用 fadeIn/fadeOut 或 show/hide 並觸發重排
        $("#tab_panel > div").eq(index).show().siblings().hide();
        
        // 強制觸發重排（某些瀏覽器需要）
        // document.getElementById('tab_panel').offsetHeight; 
    });
});

完整修復後 CSS 關鍵部分

#dialog_select_blocks2 #block_tabs #tab_panel {
    clear: both;
    padding: 5px 0;
    width: 480px;
    overflow: auto;   /* 核心修復 */
    zoom: 1;          /* IE 兼容 */
}

#dialog_select_blocks2 #block_tabs #tab_panel > div {
    display: none;    /* 默認隱藏 */
}

#dialog_select_blocks2 #block_tabs #tab_panel > div:first-child {
    display: block;   /* 默認顯示第一個 */
}

總結

**推薦**：老項目直接加 overflow: auto; zoom: 1; 即時生效；新項目重構用 Flexbox。