什么是浮动？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
img{
float:right;
}清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
表格
使用 CSS 可以极大地改善 HTML 表格的外观：
| 公司 | 城市 | 地址 |
|---|---|---|
| 阿里巴巴 | 杭州市 | 余杭区文一西路969号 |
| 腾讯 | 深圳市 | 南山区海天二路33号腾讯滨海大厦 |
| 网易 | 广州市 | 天河区思蕴路1、3、5号 |
| 新浪 | 北京市 | 海淀区西北旺东路10号院西区8号楼 |
边框
如需在 CSS 中设置表格边框，请使用 border 属性。
下例为 <table>、<th> 和 <td> 元素规定了黑色边框：
上例中的表格拥有双边框。这是因为 <table>、<th> 和 <td> 元素都有单独的边框。
border-collapse 属性设置是否将表格边框折叠为单一边框：
如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：
CSS 表格属性
| 属性 | 描述 |
|---|---|
| border | 简写属性。在一条声明中设置所有边框属性。 |
| border-collapse | 规定是否应折叠表格边框。 |
| border-spacing | 规定相邻单元格之间的边框的距离。 |
| caption-side | 规定表格标题的位置。 |
| empty-cells | 规定是否在表格中的空白单元格上显示边框和背景。 |
| table-layout | 设置用于表格的布局算法。 |
练习代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tr td{
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="20" border="1">
<caption><h1>觅知网有限公司工资表 (<span>自动生成工资条</span>) </h1> </caption>
<tr>
<td>员工编号</td>
<td>姓名</td>
<td>部门</td>
<td>职务</td>
<td>考勤天数</td>
<td>在岗天数</td>
<td>基本工资</td>
<td>岗位工资</td>
<td>补助</td>
<td>奖金</td>
<td>考勤扣款</td>
<td>罚款</td>
<td>应发工资</td>
</tr>
<tr>
<td>1</td>
<td>申蒱</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>2</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>3</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>4</td>
<td>张三</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>6</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>7</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>8</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td>9</td>
<td>赵磊</td>
<td>综合部</td>
<td>总经理</td>
<td>30</td>
<td>25</td>
<td>2.000.00</td>
<td>1.000.00</td>
<td>60.00</td>
<td>50.00</td>
<td>30.00</td>
<td>10.00</td>
<td>3.070.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>-</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>-</td>
</tr>
</table>
</body>
</html>成品展示：
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
