解决元素塌陷，清除浮动
一、什么是元素塌陷
再给子元素添加了浮动之后，它的父元素通常高度会变为0，这就导致元素整体“走位”，这就叫做元素塌陷。
二、解决方法：清除浮动
要解决元素塌陷问题很简单，可以给添加了浮动的父元素添加一个伪元素::after
::after {clear: both;display: block;content: '';}为了方便使用，我们可以把这段代码简单封装成一个类，这样子只要用这个类就能清除浮动了
比如我们新建一个名为clearfix的类，单独放在clear.less文件中
.clearfix {&::after {clear: both;display: block;content: '';}
}在主样式表中导入
@import 'mixins/clear.less';父元素中直接调用一下
父元素{width:40px.....clear子元素{float:left....}子元素{float:right...}
}这样子就能解决浮动塌陷的问题
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！