一、Css 啟用浮動高度問題整理
1.Css啟用浮動后，父元素高度塌陷。解決方案 使用clear增加清楚浮動來處理。
2.Css 指定高度的Div浮動，自適應的兄弟元素默認等高。想要自適應，兄弟元素使用
overflow: hidden;
二、Css浮動兄弟元素高度問題
現象：
浮動元素指定了高度，非浮空元素想要高度自適應。
指定高度的left ，左浮動，line元素默認高度根據left擴充或者更高。解決方案，line元素超出隱藏，則高度自適應
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ padding: 30px; } .left { float: left; } .right { float: right; } .clear { clear: both; } .line { border: 2px solid red; padding: 10px; margin-left: 100px; overflow: hidden; /**超出隱藏，可以將高度還原自適應內容高度**/ } .border { border: 1px solid gray; } .leftBlock { width: 100px; height: 100px; background: rgba(0,0,0,0.3); float: left; } .block{ background: indianred; } </style> </head> <body> <div class="block"> <div class="leftBlock">leftBlock</div> <div class="line"> <div class="border left">left <br> left </div> <div class="border right">right</div> <div class="clear"></div> </div> </div> </body> </html>
更多：
Css 偽類整理_Css 偽類對象整理_Css 偽類偽類對象使用
Css3 偽元素::before和::after
Css3 實現鋸齒效果整理