解决子元素浮动造成父元素高度塌陷的问题学习总结

解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释

一、解决子元素浮动造成父元素高度塌陷的问题的4种方法

1.直接给父元素设置高度，在子元素改变的情况下，此方法使用起来比较繁杂。
2.给父元素直接设置 overflow:hidden;样式 （原理见下文创建 BFC）
3. 父元结束标签之前加空div，样式为 clear：both； 具体样式如下：

<div class="clear"></div>
<style>{
.clear{
            clear:both;
      }
}</style>

关于clear:both;的深入理解

4.伪元素选择器,父元素加上clearfix

<div class="xxx clearfix"></div>
<style>{
.clearfix::after{ 
                  content:' '; /* 必须设置空的content属性才会生效*/
                  height:0;
                  display:block;  /* 转换成块元素  */
                  clear:both;
                }
      }</style>

关于content标签使用

二、关于BFC的认识

BFC(Block Fromatting Context)创建块级上下文格式，是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列。

了解更多可参考以下：
前端精选文摘：BFC 神奇背后的原理
什么是BFC
10分钟理解BFC原理