<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完善clearfix</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
/*padding-top: 1px;*/
}
/*解決父子元素外邊聚重疊*/
.box1:before{
content: "";
display: table;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
}
.box3{
border:10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="box3 clearfix"></div>
<div class="box4"></div>
<div class="box1">
<!-- <div>a</div> -->
<!-- <table></table> -->
<div class="box2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的布局</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr height=100%>
<td colspan="2"></td>
</tr>
<tr height="400px"></tr>
<td width="20%"></td>
<td width="80%"></td>
<table border="1" width="100%" height="100%">
<tr>
<td>豬</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>長表格</title>
<style type="text/css">
{
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>余額</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計</td>
<td>20000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2019-10-18</td>
<td>20000</td>
<td>15000</td>
<td>10000</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2019-10-18</td>
<td>20000</td>
<td>15000</td>
<td>10000</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2019-10-18</td>
<td>20000</td>
<td>15000</td>
<td>10000</td>
</tr>
</tbody>
</tfoot>
</table>
</body>
</html>
