21、CSS布局与盒模型：打造响应式网页的秘诀

CSS布局与盒模型：打造响应式网页的秘诀

1. CSS浮动属性的运用

浮动属性是CSS中改变网页元素布局的重要手段，它不仅适用于图片，还能改变其他元素的排列方式。

1.1 图片浮动示例

将图片分配到特定类中，可使其浮动到段落右侧，并在图片左侧添加留白。在HTML文档中，代码示例如下：

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

1.2 元素浮动效果

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

1.3 浮动与文本对齐的区别

text-align 只能对齐元素内的文本，无法移动整个元素；而浮动元素对元素内文本的对齐方式（居中、左对齐或右对齐）没有影响。

1.4 浮动文本的设置

浮动文本时，可通过在样式中添加 width: 30%; 等设置浮动部分的高度和宽度。在该部分周围添加边框或留白，可使其在视觉上与其他文本区分开来。

1.5 清除浮动

clear 属性可恢复