CSS浮动与表格布局全解析

1. 浮动（float）相关知识点

• 作用：使元素脱离文档流，实现水平排列等布局效果。

• 可选值 ：

  • none：默认值，不浮动。
  • left：向左浮动。
  • right：向右浮动。

• 特点 ：

  1. 浮动方向仅限左或右，且局限于祖先元素内。
  2. 元素浮动后脱离文档流，原位置丢失，下方元素会上移。
  3. 不浮动元素会挡住上方的浮动元素。
  4. 浮动元素紧接上一个元素，不会跑到其前面。
  5. 浮动元素不会盖住文字，文字会环绕浮动元素。

• 示例：

  .box1 {
  float: left; /* 向左浮动 /
  }
  .box2 {
  float: right; / 向右浮动 */
  }

2. 清除浮动（clear）相关知识点

• 作用：清除其他浮动元素对当前元素的影响。

• 可选值 ：

  • none：默认值，不清除浮动。
  • left：清除左侧浮动元素的影响。
  • right：清除右侧浮动元素的影响。
  • both：清除两侧浮动元素的影响（清除影响最大的那个）。

• 示例：

  .box3 {
  clear: both; /* 清除两侧浮动影响 */
  }

3. 高度塌陷及解决方法

• 问题：父元素未设置固定高度，子元素浮动后脱离文档流，无法撑起父元素高度，导致父元素高度丢失，页面布局混乱。
• 解决方法 ：

  1. 设置固定高度：给父元素指定固定高度，缺点是无法自适应内容高度。

     .outer {
     height: 100px; /* 固定父元素高度 */
     }

  2. 开启 BFC ：给父元素设置overflow: hidden;，BFC 可解决高度塌陷、父子外边距折叠、避免被浮动元素盖住。

     .outer {
     overflow: hidden; /* 开启BFC */
     }

  3. 添加空白块元素并清除浮动 ：在浮动子元素下方添加块元素，设置clear: both;。

  4. 使用伪元素优化 ：定义clearfix类，通过::after伪元素清除浮动，不增加额外 DOM 元素。

     .clearfix::after {
     content: "";
     display: block;
     clear: both;
     }
     /* 同时解决外边距折叠问题 */
     .clearfix::before {
     content: "";
     display: table;
     }

4. 表格（table）相关知识点

• 基本结构 ：

  • table：创建表格。
  • tr：表示表格中的一行。
  • td：表示表格中的单元格。
  • th：表示表头单元格（默认加粗居中）。
  • thead：表格头部（通常包含表头）。
  • tbody：表格主体（包含数据行，浏览器默认将tr放入其中）。
  • tfoot：表格底部（通常包含合计等信息）。

• 常用属性及样式 ：

  1. border-collapse: collapse;：合并单元格边框（去除边框间距）。
  2. border-spacing: 0px;：去除边框之间的间距。
  3. text-align：设置单元格内容水平对齐方式（left/center/right）。
  4. vertical-align：设置单元格内容垂直对齐方式（top/middle/bottom）。
  5. rowspan：纵向合并单元格（如rowspan="6"表示跨 6 行）。
  6. colspan：横向合并单元格（如colspan="3"表示跨 3 列）。

• 示例：

  table {
  border-collapse: collapse; /* 合并边框 /
  }
  td, th {
  border: 1px solid red;
  text-align: center; / 水平居中 /
  vertical-align: middle; / 垂直居中 */
  }

  序号	姓名
  01	唐僧
  合计1人

总结

以上知识点涵盖了浮动布局的核心用法、浮动带来的高度塌陷问题及解决方案，以及 HTML 表格的结构和样式设置。浮动主要用于实现元素水平排列，但其脱离文档流的特性需注意高度塌陷问题；表格则适用于展示格式化数据，通过合理使用表格相关标签和样式可实现清晰的布局效果。