网页布局的结构设计原则与CSS浮动布局

本次课程主要讲解了网页布局的结构设计原则与CSS浮动布局技术，并进行了实操练习。

小结：

1. 网页布局的结构设计原则

布局的核心是“先分大块，再分小块”，即先将页面划分为几个主要功能区域（如上中下），再在这些大区域内进行细分。

结构的搭建应遵循包含与嵌套的关系，例如，一个大容器（parent）包含多个并列的子容器（children），而不是将所有元素都直接放在一个容器内。

结构的清晰对于后续的CSS样式编写至关重要，它决定了样式选择器的编写逻辑。

2. CSS浮动布局技术

浮动（float）是实现左右布局的核心技术。当一个块级元素应用了浮动（如float: left），它会脱离正常的文档流，向左或向右“漂浮”并紧邻其父容器的边缘排列。

浮动元素会自动换行，当其宽度超过父容器剩余空间时，会自动换到下一行继续排列。

浮动元素会“飘”在父容器之上，因此其后的元素会紧邻其下方排列，而不是覆盖其上。

3. 边框属性

介绍了边框的基本语法：border: 1px solid color；其中1px为边框宽度，solid为边框样式，color为边框颜色。

一、本次课堂核心内容
这次课我们正式学习了网页布局的核心技术 ——CSS 浮动（Float），通过代码实操掌握了如何用float实现左右布局、上下结合布局，理解了浮动的原理、用法和基础结构搭建方法。

二、核心知识点解析：Float 浮动

1. Float 的基本属性值
   float: none：默认值，元素不使用浮动，保持正常文档流。
   float: left：元素向左浮动，脱离正常文档流，靠父容器左侧排列。
   float: right：元素向右浮动，脱离正常文档流，靠父容器右侧排列。 ⚠️ 重点注意：CSS 中没有居中浮动，float只能实现左或右对齐，居中需要用其他方法（如margin: 0 auto）配合实现。
2. 浮动的核心作用
   让块级元素脱离默认的 “独占一行” 特性，实现并排排列，这是网页中左右布局、多列布局的基础。
   浮动元素的宽高可以正常设置，且多个浮动元素可以在同一行内排列，只要总宽度不超过父容器宽度。