<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;font-family:"微软雅黑";color:#111;}
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden;}
.demo{width:250px;border:1px solid #ccc;/*height:20px;*/padding:10px;margin:20px auto;}
li{list-style:none; float:left;height:20px;line-height:20px;width:20px;border-radius:10px;text-align:center;background:#f36;margin-right:5px;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li id="first">1</li>
<li>2</li>
<li class="important item">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last">10</li>
</ul>
</body>
</html>一般而言，子元素设置了浮动，而父元素没有设置高度的话，父元素的高度是固定的，但是父元素加上这段代码后.clearfix:after,.clearfix:before{display:table;content:""}，高度随设置了浮动的子元素改变，这段代码什么意思？
weibo_哆啦A梦有大口袋_0