.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
浮动的原理是让图片脱离文档流,直接浮在上面。
一般布局是让内容来自动填充高度,使用浮动后原本填充的高度会消失,父元素高度为0,后续添加内容布局会产生混乱,造成高度塌陷,可以利用清除浮动来解决父元素高度塌陷的问题。