css关于浮动的高度塌陷

时间：2017-07-06 22:01:45 阅读：195 评论：0 收藏：0 [点我收藏+]

标签：class back 也会 http oct image border 标准没有

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>