css關於浮動的高度塌陷
阿新 • • 發佈：2017-07-06
title 容器 style 技術分享 html 進行 高度 就會 com
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;} 10 </style> 11 </head> 12 13 <body> 14 <div class="div1">div1</div> 15 <div class="div2">div2</div> 16 <div class="div3">div3</div> 17 </body> 18 </html>
清除內部浮動
當一個標準流中的盒子中所有的子元素都進行了浮動，並且沒有給盒子設置高度時，那麽這個盒子的整個高度就會塌陷，什麽意思呢，看下面的例子。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC清除內部浮動</title> 6 <style type="text/css"> 7 .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;}8 .parent {width: 300px; border: 1px solid #95E1D3;} 9 </style> 10 </head> 11 <body> 12 <div class="parent"> 13 <div class="child"></div> 14 <div class="child"></div> 15 </div> 16 </body> 17 </html>
父集的被兩個子div撐起來了，現在給child添加浮動
這個時候，父容器變成了2條重合的線了，也就是高度變為0了，即所說的高度塌陷。這是因為parent在計算高度時，parent內部的浮動元素child也會參與計算。
我們將父集浮動起來，
可以看出浮動父集元素解決了高度塌陷的問題。
css關於浮動的高度塌陷