21、CSS布局与盒模型全解析

CSS布局与盒模型全解析

1. 浮动属性的运用

浮动属性不仅可用于图片，还能改变网页中其他元素的布局。给图片添加特定类，可使其浮动到段落右侧，并在图片左侧添加空白填充。例如，在HTML文档中使用如下代码：

<img src="puppy.png" alt="cute puppy" class="right" />

若想移动网页中的某个部分，如将三个部分中的一个移到左侧，可在CSS样式表中添加类似 class="left" 的类，然后让该部分向左浮动。使用浮动时，自动边距会被忽略，第一个部分会浮动到左侧，而非位于后续部分之上。若不想让盒子浮动，可使用 float: none 。

需注意， text-align 只能对齐元素内的文本，无法移动整个元素；而浮动元素也不会对元素内的文本进行对齐操作。

若浮动文本，可能需要设置浮动部分的高度和宽度，如在样式中添加 width: 30%; 。为了使浮动元素与其他内容区分开，可在其周围添加边框或空白。

2. 清除浮动与恢复正常流

clear 属性可恢复正常流。在样式表中创建类，如 .stop { clear: left; } ，将该类应用到某个部分时，该部分会跳过向左浮动的盒子，恢复正常布局。 clear 属性还有 right 、