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

目录

CSS 布局与表格详解

一、浮动（float）

浮动的定义

开启浮动的方法

浮动特性

二、高度塌陷问题

产生原因

解决方案（面试重点）

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

BFC 概念

BFC 核心功能

创建 BFC 的方法

四、clear 属性详解

功能说明

属性值对照表

应用示例：

五、表格基础

表格基本结构

🔹 表格标签说明

六、表格样式与布局

基础样式设置

单元格合并技巧

视觉效果增强

七、表格结构划分

三大部分说明

八、完整表格示例

核心要点速查表

CSS 布局与表格详解

一、浮动（float）

浮动的定义

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

开启浮动的方法

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

浮动特性

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

二、高度塌陷问题

产生原因

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

解决方案（面试重点）

1. 固定高度法

   • 优点：简单直接
   • 缺点：缺乏灵活性

2. BFC 方案

   overflow: hidden;

3. 空 div 清除法

   <div style="clear: both;"></div>

4. 伪元素清除法（推荐）

   .clearfix::after { content: ""; display: block; clear: both; }

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

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

BFC 概念

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

BFC 核心功能

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

创建 BFC 的方法

overflow: hidden;

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

四、clear 属性详解

功能说明

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

属性值对照表

应用示例：

.box3 { clear: both; }

五、表格基础

表格基本结构

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

🔹 表格标签说明

六、表格样式与布局

基础样式设置

table { border-collapse: collapse; /* 边框合并 */ } td, th { border: 1px solid #000; text-align: center; vertical-align: middle; }

单元格合并技巧

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

视觉效果增强

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

七、表格结构划分

三大部分说明

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

八、完整表格示例

<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>

核心要点速查表