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

第一种:clear清除浮动

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

第二种:伪类清除浮动

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

第三种:子级方法 

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

第四种:父级方法

                (1)给父元素设置display:inline-block; 

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

                (3)给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况 ;

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

你可能感兴趣的:(解决子元素浮动造成父元素高度塌陷的问题的几种方法)