如何解决：css高度塌陷问题

今天分享一下我的css笔记，对于一些难点，我都会编辑在笔记docx上，这是我第一天发表的，希望以后我都会继续分享一些前端的技术难点，供大家一起讨论

 

css高度塌陷问题

         提出问题：子元素脱离文档流后，父元素高度会出现塌陷，造成布局混乱

         解决问题：根据W3C标准，页面中元素都有一个隐含属性BFC(Block Formatting Context),该属性可以设置打开或关闭，默认关闭

当元素开启BFC属性后：

1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素覆盖
3. 开启BFC的元素能包含浮动的子元素

开启元素的BFC方式：

1. 设置元素浮动
2. 设置元素绝对定位 
3. 设置元素为inline-block

（都能开启，但会导致父元素宽度丢失）  

4.将元素overflow：auto或hidden

         为了兼容IE8以下的浏览器，IE6虽然没有BFC属性，但有另外一个隐含属性hasLayout(layout布局)类似BFC，直接开启hasLayout：

         {

zoom：1;

         }

兼容问题，解决高度塌陷：

{

         Overflow：hidden/auto;

         Zoom：1;

}

 

总结：

只要父元素开启了BFC，就能解决高度坍塌问题！不过通常都是使用以下方式来解决：

解决高度塌陷问题的最优方案,通过CSS：

通过设置浮动元素的父元素  :after{ content：“”；display：block；clear:both；}解决（但不兼容IE6浏览器），则可开启hasLayout隐藏属性进而解决高度塌陷

         .clearfix : after{                        .clearfix {

                  Content:””;                                   Zoom:1;//开启hasLayout，兼容IE6

                  Display:block;                  }

                  Clear:both;

         }

 

提问：为什么用after而不是用before？

答：因为坍塌问题，是由于父元素底部出现塌陷，所以设置父元素的after表示将子元素之后的父元素内容撑起来，才不会塌陷