Question

一个CSS的基础问题关于li的浮动

<ul>
<li>11</li>
<li>22</li>
</ul>

ul {
background: green;
}
ul li{
width:20%;
height: 30px;
float: left;
}
代码如上，为什么li用了float:left之后，ul的背景色显示不出来了

Answer 1

元素浮动后，他的父级元素要清除浮动。我的一般做法在你的css文件里加上以下,可以通用
.clearfix{display:block}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}

例如你的这个例子，在ul上加上clearfix就可以了，

<ul class="clearfix">
<li>11</li>
<li>22</li>
</ul>