CSS浮动后的高度塌陷问题

高度塌陷：

            在浮动的布局中，父元素的高度默认被子元素撑开

             当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离

             将无法脱离父元素的高度，导致父元素的高度丢失

           

             父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱

             所以高度他先是浮动布局常见的问题，且必须进行处理

高度塌陷解决办法

            BFC（Block Formatting Context）块级格式化环境

              -BFC是一个css的隐含属性，可以为一个元素开启BFC

                开启BFC该元素会编程一个独立的布局区域

               

              -元素开启BFC的特点：

                 1.开启BFC的元素不会被浮动元素覆盖

                 2.开启BFC的元素和子元素外边距不会重叠

                 3.开启BFC的怨怒是可以包含浮动的子元素

           

            -可以通过一些特殊方式来开启元素的BFC

            1.设置元素的浮动

               缺点：元素脱离文档流 失去宽度属性

float: left;

            2.将元素设置为行内块元素

               缺点：宽度属性

display: inline-block;

            3.将元素的overflow设置为一个非visible的值

               -一般设置为 overflow:hidden

               -缺点较小

 overflow: hidden;