简介

父元素的高度，都是由内部未浮动子元素的高度撑起的，子元素浮动，脱离文档流，父元素高度就会失去支撑

解决方案

方案一

为父元素设置overflow:hidden属性
解释：CSS中的overflow:hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素margin范围
缺点：子元素超出父元素，会被隐藏

方案二

在父元素内的结尾添加一个空的块级子元素，并设置这个块级子元素清楚浮动影响（clear:both）
解释：clear:both属性和父元素包含非浮动的元素
缺点：多了一个空元素，影响选择器和查找元素

方案三

设置父元素也浮动
解释：浮动属性会强制父元素扩大包含所有浮动的内部元素 缺点：父元素之后的平级元素会被父元素遮挡，需要设置父元素之后的平级元素清除浮动（clear:both）

方案四（完美解决）

为父元素末尾添加伪元素，并且为这个伪元素设置cleara:both

父元素::after{
    content:'',
    display:table,
    clear:both,
    height:0//解决老版浏览器display:table属性高度可能不能为0
}

优点：不影响显示隐藏、不会影响查找元素、不会产生新的浮动问题