內層元素設置浮動，外層元素不設置浮動和高度，內層元素不能撐開外層元素高度問題
<style>
.par {
border: 5px solid #fcc;
width: 300px;
/*height:110px; 註意這裏給外層元素設置相應高度，外層元素會包裹內層元素，並占用文檔流*/
/*float:left; 或者給外層元素設置浮動，外層元素也會包裹內層元素，但不會占用文檔流空間*/
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
---上邊代碼顯示頁面（內層元素不能撐開外部元素）
---上邊給出了2種解決方案，第一種方案，外層元素設置高度，寫死了，如果內部元素高度發生變化，外層層元素寫死了，不太好。第二種解決方案，會脫離文檔流也不太好。最好的解決方案（為外層元素加overflow屬性）：.par { overflow: hidden; } //清除內部浮動，外層元素par在計算高度時，par內部的浮動元素child也會參與計算。
解釋為什麽：overflow:hidden撐起float的元素高度
BFC(塊級排版上下文)的定義：
BFC是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相幹。
BFC的規則（只列出需要的）：
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。
- 計算BFC的高度時，浮動元素也參與計算。
哪些元素會產生BFC（只列出需要的）：
- overflow不為visible
參考：https://www.cnblogs.com/feichengwulai/articles/4687579.html
參考知乎：https://www.zhihu.com/question/30938856/answer/324582230
內層元素設置浮動，外層元素不設置浮動和高度，內層元素不能撐開外層元素高度問題