子元素浮动导致父元素高度不够问题的解决方案

1.子元素浮动导致父元素高度(父元素坍塌)

未设置高度的父元素中，如果有子元素浮动(float)，由于子元素不占据页面空间，经常会出现父元素坍塌的问题，如下图：

图片浮动

2.解决方案：

方案1: 让父元素浮动 

float: left;

方案2: 使用clearfix 黑魔法，设置父元素 BFC (blocking formatting content)

浮动的元素都会生成一个BFC（块）

overflow: auto;

最新的定义方法:

display: flow-root;

方案3: 在父元素末尾中设置一个清除浮动的块级元素占位

 

或者

方案4: 利用伪类 :after 

.outer:after{
     content: '020';
     display: block;
     clear: both;
     visibility: hidden;
     height: 0; }

方案5: 利用伪元素 ::after 

.outer::after{   
    content: '020';     
    display: block;      
    clear: both;     
    visibility: hidden;     
    height: 0; }