1. CSS标准盒模型
在使用 CSS 进行布局之前，了解标准盒模型是必要的。标准盒模型定义了在 HTML 中每一个元素所占据的空间的大小以及如何计算元素的总宽度和高度。
1.1 盒模型的组成部分
标准盒模型一共包含四个组成部分：content（内容）、padding（内边距）、border（边框）和 margin（外边距）。
下面是一个标准盒模型的示意图：
+-------------------------------------------------------+
| margin-top |
| +------------------+ |
| | border-top | |
| | | |
| | padding-top | |
| | | |
| | content | |
| | | |
| | padding-bottom | |
| | | |
| | border-bottom | |
| +------------------+ |
| margin-bottom |
+-------------------------------------------------------+
如上图所示，一个盒子被分为四部分：margin、border、padding 和 content。其中，content 指的是元素本身的内容，padding、border 和 margin 则是分别在 content 的周围加上了一层层的“边距”。
1.2 元素的总宽度和高度的计算
在标准盒模型中，元素的总宽度和高度是由 content、padding、border 和 margin 共同组成的。
元素的总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素的总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
其中，width 和 height 分别指 content 的宽度和高度，即元素本身内容所占据的空间大小。
下面是一个示意图：
+-------------------------------------------------------+
| margin-top | border-top | padding-top | height | padding-right | border-right | margin-right |
| | | | | | | |
| margin-left | border-left | padding-left| width | padding-right | border-right | margin right |
| | | | | | | |
| margin-bottom | border-bottom | padding-bottom| height | padding-right | border-right | margin-right |
+-------------------------------------------------------+
通过了解标准盒模型的组成部分以及元素宽度和高度的计算方法，我们可以更好地理解并进行 CSS 的布局。
2. 浮动的使用
浮动是 CSS 中一种常用的布局方式。浮动使元素可以脱离文档流并向左或向右移动，直到碰到其父元素或另一个浮动元素为止。
2.1 float 属性
float 属性可以决定元素应该向左或向右浮动。下面是一个示例：
.left {
float: left;
}
.right {
float: right;
}
示例中，.left 类的元素将向左浮动，.right 类的元素将向右浮动。
2.2 clear 属性
由于浮动元素可以影响包含它们的父元素的高度，所以我们在使用浮动时，往往需要用 clear 属性来清除浮动。clear 属性可以使元素下方和上方的浮动元素影响失效，从而使元素恢复到正常的文档流中。
clear 属性有以下几个可选值：
left：只清除左侧的浮动元素
right：只清除右侧的浮动元素
both：清除左侧和右侧的浮动元素
none：不清除浮动
下面是一个示例：
.clear {
clear: both;
}
示例中，.clear 类的元素将清除下方和上方的浮动元素的影响。
我们可以用 clear 属性来实现两个盒子之间的换行效果。下面是一个示例：
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.clearfix {
clear: both;
}
示例中，.left 和 .right 两个元素的宽度都为 50%，它们将分别向左和向右浮动。为了使下一个元素不与前面的浮动元素重叠，我们添加了一个 .clearfix 类，这个类的元素将清除下一行浮动元素的影响。
2.3 浮动的注意事项
在使用浮动时，需要注意以下几点：
浮动元素必须有宽度
浮动元素会脱离文档流，可能会影响父元素的高度，需要使用 clear 属性清除浮动
浮动元素会影响后面的元素位置，可以使用 margin 值来进行调整
3. 总结
通过本文的学习，我们了解了 CSS 的标准盒模型和浮动布局。标准盒模型定义了元素宽度和高度的计算方法，使我们更好地进行 CSS 的布局；浮动布局是 CSS 常用的布局方式之一，可以实现多列布局等效果。但需要注意浮动元素的宽度和高度的计算方法、清除浮动以及对后面元素位置的影响。