HTML+CSS 浮动与表格全总结笔记

[CSS 布局与表格详解](#CSS 布局与表格详解)

一、浮动（float）

浮动的定义

开启浮动的方法

[BFC 概念](#BFC 概念)

[BFC 核心功能](#BFC 核心功能)

[创建 BFC 的方法](#创建 BFC 的方法)

[四、clear 属性详解](#四、clear 属性详解)

[🔹 表格标签说明](#🔹 表格标签说明)

CSS 布局与表格详解

一、浮动（float）

浮动的定义

浮动（float）是一种使元素脱离标准文档流的布局方式，元素会向左或向右移动，直到碰到父元素边界或其他浮动元素。

开启浮动的方法

css 复制代码

float: left;   /* 左浮动 */
float: right;  /* 右浮动 */

浮动特性

脱离文档流，原位置不再保留
可与其他浮动元素并排显示
文本和行内元素会自动环绕浮动元素

二、高度塌陷问题

产生原因

当所有子元素都浮动时，父元素因无法获取浮动子元素的高度而导致高度塌陷，进而引发布局混乱。

解决方案（面试重点）

固定高度法
- 优点：简单直接
- 缺点：缺乏灵活性
BFC 方案
css 复制代码
```
overflow: hidden;
```
空 div 清除法
html 复制代码
```
<div style="clear: both;"></div>
```
在浮动元素的下方增加一个块元素，然后给块元素用clear:both;清除浮动影响
伪元素清除法（推荐）
css 复制代码
```
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```
单独定义一个类，利用::after，在类中添加一个空白的内容，并转成块元素，然后对齐

清除浮动浮动，谁需要解决高度塌陷问题，就给谁加这个类

使用时只需为父元素添加 .clearfix 类。

三、BFC（块级格式化上下文）

BFC 概念

是元素一种隐藏属性，一旦开启，它就有3个功能

一种独立的渲染区域，内部元素的布局不会影响外部元素。

BFC 核心功能

解决父子元素外边距折叠
避免高度塌陷
防止被浮动元素覆盖

创建 BFC 的方法

css 复制代码

overflow: hidden;

其他方式还包括：display: flow-root;、position: absolute; 等。

四、clear 属性详解

功能说明

用于清除前面浮动元素对当前元素的影响。

属性值对照表

值	作用
none	默认值，不清除浮动
left	清除左侧浮动影响
right	清除右侧浮动影响
both	清除两侧浮动影响（最常用）

应用示例：

css 复制代码

.box3 {
  clear: both;
}

五、表格基础

表格基本结构

html 复制代码

<table>
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

🔹 表格标签说明

标签	用途
`<table>`	定义表格整体
`<tr>`	定义表格行
`<td>`	定义标准单元格
`<th>`	定义表头单元格

六、表格样式与布局

基础样式设置

css 复制代码

table {
  border-spacing:0px ;  /* 去除边框之间的间距，两条线成1条线 */
  border-collapse: collapse; /* 边框合并 */
}
td, th {
  border: 1px solid #000;
  text-align: center;        /* 单元格水平居中 */
  vertical-align: bottom;  /* 单元格垂直对齐方式 */
}

单元格合并技巧

html 复制代码

<td rowspan="2">纵向合并单元格</td>
<td colspan="3">横向合并单元格</td>

视觉效果增强

css 复制代码

tr:nth-child(2n) { background-color: #f9f9f9; }
tr:hover { background-color: lightblue; }

七、表格结构划分

三大部分说明

标签	用途	特点
`<thead>`	表头区域	固定显示在顶部
`<tbody>`	主体内容	自动包裹所有`<tr>`
`<tfoot>`	表尾区域	通常放置汇总数据

注意：即使未显式定义<tbody>，浏览器也会自动创建并将所有<tr>包含其中。因此选择行时应使用 tbody > tr 选择器。

八、完整表格示例

html 复制代码

<table border="1">
  <thead>
    <tr><th>日期</th><th>收入</th><th>支出</th><th>结余</th></tr>
  </thead>
  <tbody>
    <tr><td>10.24</td><td>500</td><td>300</td><td>200</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">总计</td><td>200</td></tr>
  </tfoot>
</table>

核心要点速查表

知识点	关键代码	主要用途
清除浮动	`.clearfix::after`	解决高度塌陷
BFC 创建	`overflow:hidden`	解决布局问题
清除浮动影响	`clear:both`	恢复正常文档流
单元格合并	`rowspan/colspan`	合并相邻单元格
表格结构	`<tbody>`	自动包裹行元素
视觉优化	`nth-child(2n)`	实现斑马纹效果