1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 background-color:orange; 14 float:left; 15 /* 16 高度塌陷的问题： 17 在浮动布局当中，父元素的高度默认被子元素撑开 18 档子元素浮动后，其会脱离文档流，子元素会从文档流中> 脱离将会无法撑起父元素的高度，导致父元素的高度丢失 19 父元素高度丢失后，其下面的元素会自动上移，导致页面布局> 混乱 20 所以高度塌陷的问题是浮动布局中比较常见的问题，这个问题> 我们必须进行处理 21 22 */ 23 } 24 /* 25 BFC-块级格式化环境 26 -BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC 27 开启BFC该元素会变成一个独立的布局区域 28 -元素开启BFC后的特点： 29 1.开启BFC的元素不会被浮动元素锁覆盖 30 2.开启BFC的元素子元素和父元素外边距不会重叠 31 3.开启BFC的元素可以包含浮动的子元素 32 可以通过一些特殊的方法来开启元素的BFC 33 1.设置元素浮动 34 2.将元素设置为行内块元素 35 3.将overflow设置为非visible的值 36 -hiden/auto 37 */ 38 </style> 39 </head> 40 <body> 41 <div class="outer"> 42 <div class="inner"></div> 43 44 </div> 45 </body> 46 </html> ~ ~ ~ ~ ~ ~ ~