<!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>一般而言，子元素設(shè)置了浮動(dòng)，而父元素沒有設(shè)置高度的話，父元素的高度是固定的，但是父元素加上這段代碼后.clearfix:after,.clearfix:before{display:table;content:""}，高度隨設(shè)置了浮動(dòng)的子元素改變，這段代碼什么意思？
1 回答
已采納
weibo_哆啦A夢有大口袋_0
TA貢獻(xiàn)107條經(jīng)驗(yàn) 獲得超146個(gè)贊
在這個(gè).clearfix類名前后各加一個(gè)偽類，偽類的屬性為{display:table;content:""}，這段代碼的作用是清除浮動(dòng)的方法之一。
添加回答
舉報(bào)
0/150
提交
取消