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

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

第一种：clear清除浮动

            在浮动元素后的同级元素直接用clear清除前一元素的浮动

第二种：伪类清除浮动

            一个父级元素内所有子元素都为浮动元素，则在父级元素尾部自动创建一个非浮动块状元素

第三种：子级方法

            在子元素的最后添加一个高度为0的子元素，并且让他清除浮动

第四种：父级方法

            （1）给父元素设置display:inline-block; 

            （2）给父元素设置overflow:hidden；清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，
            应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，
            使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

            （3）给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况 ；

           （4）利用伪元素:after，并且清除浮动 ：利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，
            只不过这里用伪类代替了空的div元素