html基础：css的浮动，定位与装饰

CSS 浮动、定位与装饰的学习

在 CSS 布局与视觉设计中，浮动（Float）、定位（Positioning）和装饰（Decoration） 是实现复杂页面效果的核心技术。

一、浮动（Float）：

浮动是 CSS 中让元素脱离正常文档流、实现多元素并排的重要手段，在文本环绕、简单多列布局中有不可替代的作用。

1. 浮动的基本语法与特性

.float-left { float: left; } /* 元素向左浮动 */

.float-right { float: right; } /* 元素向右浮动 */

.clear-float { float: none; } /* 取消浮动（默认值） */

• 核心特性： 浮动元素脱离文档流，后续元素会围绕其排列（可实现文字环绕图片）浮动元素会收缩包裹内容（类似display: inline-block） 浮动会导致父容器高度塌陷（需手动清除浮动）

2. 经典场景：图文混排

<div class="article">

<img src="image.jpg" alt="示例图片" class="float-img">

<p>浮动元素会让后续文本环绕其排列，形成经典的图文混排效果。通过设置float: left/right，图片会移动到容器边缘，文字自动填充剩余空间。</p>

</div>

.float-img {

float: left;

margin: 0 15px 10px 0; /* 右和下外边距留出文字空间 */

width: 200px;

}

3. 清除浮动的三种方法

当父容器不设置高度时，浮动子元素会导致父容器高度塌陷，需通过以下方式修复：

方法一：使用clear属性（额外添加清除元素）

<div class="parent">

<div class="float-child"></div>

<div class="clear"></div> <!-- 清除浮动的空元素 -->

</div>

.clear { clear: both; } /* 清除左右两侧浮动 */

方法二：伪元素清除法（无需修改 HTML 结构）

二、定位（Positioning）：

1. position属性的四种取值

2. 相对定位：微调元素位置

.relative-box {

position: relative;

top: 10px; /* 向下偏移10px */

left: 20px; /* 向右偏移20px */

}

特点：元素偏移后，原位置仍保留，不影响其他元素布局。

3. 绝对定位：实现层级布局

<div class="parent">

<div class="child">绝对定位元素</div>

</div>

.parent {

position: relative; /* 作为子元素的定位参考 */

height: 300px;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /* 居中对齐 */

}

关键：子元素的absolute定位需依赖祖先元素的relative定位（子绝父相）。

4. 固定定位：制作悬浮导航栏

.navbar {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 100; /* 层级最高，避免被遮挡 */

}

效果：页面滚动时导航栏始终固定在顶部。

三、装饰（Decoration）：

1. 边框与圆角：

.card {

border: 1px solid #e0e0e0; /* 细实线边框 */

border-radius: 12px; /* 四角圆角 */

box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 立体阴影 */

}

2. 背景渐变：

.gradient-btn {

background: gradient(to right, #ff4d4f, #ffb800);

3. 文本装饰：

.heading {

text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 立体文本阴影 */

text-decoration: underline dotted #2196f3; /* 点状下划线 */

text-transform: uppercase; /* 转为大写 */

}

4. 透明度

filter: grayscale(1); /* 100%灰度 */

transition: filter 0.3s ease;

}