CSS絕對定位span導致父div高度塌陷：脫離文檔流特性解析

現象

div包含多個position:absolute的span，清除浮動後div高度為0，未被撐開。

根本原因

絕對定位元素完全脫離標準文檔流：

• 不佔據父容器空間，父容器高度計算時忽略它們。
• 相對定位父元素（position:relative）僅提供定位基準，不包裹絕對定位子元素。
• 浮動清除（clearfix）僅針對浮動元素，對absolute無效。

解決方案

1. 固定父容器高度（已知內容高度）：

   .test { height: 100px; } /* 或 min-height */

2. 改用Flex/Grid布局（現代推薦）：

   .test { display: flex; justify-content: space-between; } 
   span { position: static; } /* 取消absolute */

3. JS動態計算高度（內容動態）：

   const container = document.querySelector('.test');
   const spans = container.querySelectorAll('span');
   let maxBottom = 0;
   spans.forEach(s => {
       const rect = s.getBoundingClientRect();
       maxBottom = Math.max(maxBottom, rect.bottom);
   });
   container.style.height = (maxBottom - container.getBoundingClientRect().top) + 'px';

4. 偽元素撐開（不推薦，語義不清）：

   .test::after { content: ''; display: block; height: 1px; }

對比：浮動 vs 絕對定位

最佳實踐

佈局優先Flex/Grid，定位僅用於覆蓋層、相對父元素定位的小組件。若必須用absolute佈局，父容器需顯式height或min-height。

1. 上一篇文章： Tomcat校園網可訪問但遠程不可訪問：內網IP與公網IP區別
2. 下一篇文章： Tomcat主頁正常但自定義JSP 404：項目部署路徑與Context Path配置排查

程式設計綜合問答

HTML5 觸控事件入門：使用 touchstart 實現點擊螢幕彈出提示

在行動裝置網頁開發中，需響應觸控而非滑鼠點擊。touchst

ZK 框架報錯：缺少 captcha 引擎類別，補齊 zkex.jar 即可解決

ZK 專案啟動時拋出異常： org.zkoss.zk.ui.

Oracle SQL 多條件分組查詢去重取最大值實戰

問題場景 需要從多張關聯表（jobreply、job、job

網頁強制下載 txt 文件而非瀏覽器預覽

問題 點擊 .txt 鏈接瀏覽器直接顯示內容，需改為彈出下載