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

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

呈现效果


对应样式

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

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

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

正常显示(加了overflow:hidden以后)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容