子元素设置float,父元素高度塌陷

问题:给元素设置 float:right,发现给父元素加的margin-bottom:15px失效(其实不是失效,是因为父元素高度塌陷所以页面效果没有达到)

呈现效果


对应样式

解决:在给父元素.el-mine-new-btn设置了overflow: hidden;属性以后问题解决。

overflow: hidden;------- 溢出隐藏:当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观,也可以清除浮动,当给子元素设置浮动时,给父元素添加overflow:hidden,按照它具有裁剪超出部分的性质,应该将子元素超出的部分裁剪,但是因为子元素设置了浮动,无法裁剪,所以只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素了。

加了overflow:hidden以后,页面呈现正常效果:如下:

正常显示(加了overflow:hidden以后)

你可能感兴趣的:(子元素设置float,父元素高度塌陷)