浮动与定位核心知识，灵活运用实现网页布局

浮动（Float）与定位（Positioning）是CSS布局中非常重要的概念。掌握它们可以帮助我们实现更加复杂和灵活的网页布局。本节课将深入介绍浮动与定位的基本概念、用法以及它们在网页布局中的应用。

1. 浮动（Float）

浮动是CSS中的一种布局方式，通常用于实现文字环绕效果、两栏布局等。

1.1 浮动的基本概念

float属性允许元素向左或向右浮动，浮动的元素会脱离文档的正常流布局，并让周围的元素环绕它。

1.2 常见的浮动值

left：元素向左浮动，周围的内容会环绕到右侧。
right：元素向右浮动，周围的内容会环绕到左侧。
none：元素不浮动，回到文档流中。

1.3 浮动的应用案例

1.3.1 两栏布局

/* 容器设置为浮动布局 */
.container {
    width: 100%;
}

.left {
    float: left;
    width: 70%; /* 左栏占70% */
    background-color: #f4f4f4;
    padding: 10px;
}

.right {
    float: left;
    width: 30%; /* 右栏占30% */
    background-color: #ddd;
    padding: 10px;
}

/* 清除浮动 */
.clear {
    clear: both;
}

<div class="container">
    <div class="left">
        <p>这是左侧内容</p>
    </div>
    <div class="right">
        <p>这是右侧内容</p>
    </div>
    <div class="clear"></div>
</div>

中文注释：

.container 为容器，包含左右两个浮动元素。
.left 和 .right 使用 float 属性实现了左右两栏的布局。
.clear 类使用 clear: both 来清除浮动，确保容器能正确包裹浮动的元素。

1.4 浮动清除

使用 clear 属性可以清除浮动影响，防止容器高度塌陷。

.clear {
    clear: both; /* 清除左右浮动影响 */
}

2. 定位（Positioning）

CSS中的定位是控制元素位置的另一种方法，通过设置元素的定位类型和偏移量，可以实现更加精确的布局。

2.1 定位类型

2.1.1 static

默认值，元素按照文档流正常排列，不受 top, right, bottom, left 影响。

/* 默认静态定位 */
div {
    position: static;
}

2.1.2 relative

相对定位，元素相对于其原始位置进行偏移，不会脱离文档流。

/* 相对定位 */
div {
    position: relative;
    top: 20px; /* 向下偏移20px */
    left: 10px; /* 向右偏移10px */
}

2.1.3 absolute

绝对定位，元素相对于最近的已定位（非static）祖先元素进行定位，脱离文档流。

/* 绝对定位 */
.container {
    position: relative; /* 设定相对定位父元素 */
}

.absolute-box {
    position: absolute;
    top: 50px; /* 距离容器顶部50px */
    right: 30px; /* 距离容器右边30px */
}

<div class="container">
    <div class="absolute-box">
        这是一个绝对定位的盒子
    </div>
</div>

中文注释：

.container 设置了 position: relative，为 .absolute-box 提供了定位参照点。
.absolute-box 使用 position: absolute，根据容器的位置偏移。

2.1.4 fixed

固定定位，元素相对于浏览器窗口进行定位，不随滚动条滚动。

/* 固定定位 */
.fixed-box {
    position: fixed;
    top: 10px; /* 距离窗口顶部10px */
    left: 10px; /* 距离窗口左边10px */
}

<div class="fixed-box">
    这是一个固定定位的盒子
</div>

中文注释：

.fixed-box 使用 position: fixed，固定在浏览器窗口的特定位置，即使页面滚动也不会改变位置。

2.1.5 sticky

粘性定位，元素在滚动到指定位置时固定，直到其父元素的边界被完全滚动出视口。

/* 粘性定位 */
.sticky-box {
    position: sticky;
    top: 0; /* 滚动到顶部时固定 */
}

<div class="sticky-box">
    这是一个粘性定位的盒子
</div>

中文注释：

.sticky-box 使用 position: sticky，当页面滚动到它的位置时，它会固定在视口顶部，直到滚动父容器超出视口范围。

3. 浮动与定位的综合应用

浮动与定位常常结合使用，帮助实现复杂的布局效果。通过灵活运用这两种技术，可以创建响应式、灵活的网页布局。

3.1 响应式布局示例

/* 容器宽度自适应 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 左右两栏布局 */
.left {
    float: left;
    width: 70%;
}

.right {
    float: left;
    width: 30%;
}

/* 清除浮动 */
.clear {
    clear: both;
}

/* 媒体查询，手机端显示为单列 */
@media (max-width: 768px) {
    .left, .right {
        width: 100%; /* 在小屏幕上，左右两栏变成单列 */
    }
}

<div class="container">
    <div class="left">
        <p>左侧内容</p>
    </div>
    <div class="right">
        <p>右侧内容</p>
    </div>
    <div class="clear"></div>
</div>

中文注释：