css漂浮（css漂浮div fixed不跟着缩放变化）

## CSS 漂浮### 简介CSS 漂浮 (float) 属性最初是为了在网页上实现简单的图片环绕效果。它允许元素脱离文档流的正常布局，并向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框为止。尽管现在有更先进的布局工具，但理解浮动及其工作原理对于处理旧代码、解决布局问题以及某些特定布局场景仍然至关重要。### 一、 float 属性值`float` 属性可以接受以下值：- `left`：元素浮动到其包含元素的左侧。 - `right`：元素浮动到其包含元素的右侧。 - `none`：默认值。元素不浮动，并遵循正常的文档流布局。 - `inherit`：元素继承其父元素的 `float` 属性值。### 二、 浮动元素的特点-

脱离文档流：

浮动元素会脱离正常的文档流，这意味着在其后的元素会忽略该浮动元素并占据其原本的位置。 -

包裹性：

浮动元素会尽可能地靠近其包含元素的边缘，但不会超出其包含块的边界。 -

块级格式化上下文 (BFC)：

浮动元素会形成一个块级格式化上下文，这意味着其内部的元素布局不会受到外部元素的影响，反之亦然。### 三、 清除浮动由于浮动元素脱离文档流，可能会导致其父元素高度塌陷，进而影响后续元素的布局。为了解决这个问题，需要清除浮动。以下是几种常见的清除浮动的方法：1.

使用 clear 属性：

为需要清除浮动的元素设置 `clear` 属性。`clear` 属性可以接受以下值：- `left`：清除左侧的浮动。- `right`：清除右侧的浮动。- `both`：清除两侧的浮动。- `none`：默认值。不清除任何浮动。```css.clearfix {clear: both;}```2.

使用伪元素清除浮动：

为父元素添加一个 `::after` 伪元素，并设置 `clear: both`。```css.clearfix::after {content: "";display: block;clear: both;}```3.

使用 overflow 属性：

为父元素设置 `overflow: hidden`、`overflow: auto` 或 `overflow: scroll`，这会使其形成一个BFC，从而包含浮动元素。### 四、 实际应用#### 1. 图文环绕```html

```#### 2. 多栏布局```html ```### 五、 总结虽然现在有更先进的布局工具，如 Flexbox 和 Grid，但了解 CSS 漂浮仍然很重要。它可以帮助你理解旧代码、解决布局问题以及在特定场景下实现所需的布局效果。

CSS 漂浮

简介CSS 漂浮 (float) 属性最初是为了在网页上实现简单的图片环绕效果。它允许元素脱离文档流的正常布局，并向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框为止。尽管现在有更先进的布局工具，但理解浮动及其工作原理对于处理旧代码、解决布局问题以及某些特定布局场景仍然至关重要。

一、 float 属性值`float` 属性可以接受以下值：- `left`：元素浮动到其包含元素的左侧。 - `right`：元素浮动到其包含元素的右侧。 - `none`：默认值。元素不浮动，并遵循正常的文档流布局。 - `inherit`：元素继承其父元素的 `float` 属性值。

二、 浮动元素的特点- **脱离文档流：** 浮动元素会脱离正常的文档流，这意味着在其后的元素会忽略该浮动元素并占据其原本的位置。 - **包裹性：** 浮动元素会尽可能地靠近其包含元素的边缘，但不会超出其包含块的边界。 - **块级格式化上下文 (BFC)：** 浮动元素会形成一个块级格式化上下文，这意味着其内部的元素布局不会受到外部元素的影响，反之亦然。

三、 清除浮动由于浮动元素脱离文档流，可能会导致其父元素高度塌陷，进而影响后续元素的布局。为了解决这个问题，需要清除浮动。以下是几种常见的清除浮动的方法：1. **使用 clear 属性：** 为需要清除浮动的元素设置 `clear` 属性。`clear` 属性可以接受以下值：- `left`：清除左侧的浮动。- `right`：清除右侧的浮动。- `both`：清除两侧的浮动。- `none`：默认值。不清除任何浮动。```css.clearfix {clear: both;}```2. **使用伪元素清除浮动：** 为父元素添加一个 `::after` 伪元素，并设置 `clear: both`。```css.clearfix::after {content: "";display: block;clear: both;}```3. **使用 overflow 属性：** 为父元素设置 `overflow: hidden`、`overflow: auto` 或 `overflow: scroll`，这会使其形成一个BFC，从而包含浮动元素。

四、 实际应用

1. 图文环绕```html

```

2. 多栏布局```html

```

五、 总结虽然现在有更先进的布局工具，如 Flexbox 和 Grid，但了解 CSS 漂浮仍然很重要。它可以帮助你理解旧代码、解决布局问题以及在特定场景下实现所需的布局效果。