为什么clear:both
不起作用?
首先:
clear
属性只是在block
元素是起作用,如果你把clear:both
用在一个inline-block
或inline
元素上,clear:both
是不会起任何作用的。
解决方法:
参考1:利用伪类进行清除浮动
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
}
参考2:
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
注:这里的table的作用是实现在一行中。