1. 程式人生 > >css關於浮動的高度塌陷

css關於浮動的高度塌陷

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關於浮動的高度塌陷