web蓝桥杯备考（css浮动与定位）浮动（float）作用和副作用作用：使元素脱离文档流，向左或向右浮动，常用于多列

浮动（float）

作用和副作用

作用：使元素脱离文档流，向左或向右浮动，常用于多列布局或图文混排。
副作用：父元素高度塌陷，需通过 clearfix 清除浮动（如伪元素 ::after）。

基本用法

left：元素向左浮动。
right：元素向右浮动。
none：默认值，元素不浮动。
inherit：继承父元素的 float 值。

示例：

<div class="container">
  <div class="box left">左浮动</div>
  <div class="box right">右浮动</div>
  <div class="box">普通元素</div>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}
.left {
  float: left;
}
.right {
  float: right;
}

float的特性

脱离文档流

浮动的元素会脱离正常的文档流，不再占据原来的空间。
其他非浮动元素会忽略浮动元素的位置，可能会覆盖在浮动元素上。

文字环绕

浮动的元素会使其周围的文字或其他内联元素环绕它。

示例：

<div class="float-left"></div>
<p>这是一段文字，会环绕在浮动元素的周围。</p>

.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-right: 10px;
}

宽度自适应

浮动的元素如果没有设置宽度，其宽度会根据内容自适应。

多个浮动元素的排列

多个浮动元素会按照浮动的方向依次排列，如果空间不足则会换行。

常见问题及解决方法

父元素高度塌陷

当父元素包含浮动元素时，父元素的高度会塌陷（即高度为0），因为浮动元素脱离了文档流。
解决方法：

清除浮动（Clearfix） ：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

在父元素上添加 clearfix 类：

<div class="container clearfix">
  <div class="box left">左浮动</div>
  <div class="box right">右浮动</div>
</div>

使用 overflow：

.container {
  overflow: hidden; /* 或 overflow: auto */
}

浮动元素覆盖非浮动元素

浮动元素可能会覆盖后续的非浮动元素。

解决方法：

使用 clear 属性清除浮动：

.clear {
  clear: both;
}

在需要清除浮动的元素上添加 clear 类：

<div class="box left">左浮动</div>
<div class="box right">右浮动</div>
<div class="clear"></div>

`float` 的应用场景

1. 文字环绕图片

实现图片与文字的混排效果。

示例：

<img src="image.jpg" class="float-left">
<p>这是一段文字，会环绕在图片周围。</p>

2. 多列布局

使用 float 实现简单的多列布局。

示例：

<div class="column left">左列</div>
<div class="column right">右列</div>

.column {
  width: 48%;
  float: left;
  margin: 1%;
}
.right {
  float: right;
}

3. 导航栏

使用 float 实现水平导航栏。

示例：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
</ul>

.nav li {
  float: left;
  margin-right: 20px;
}

定位（position）

定位属性

1. `position` 属性

用于指定元素的定位方式。
可选值：
- static：默认值，元素按照正常文档流排列。
- relative：相对定位，元素相对于其正常位置进行偏移。
- absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。
- fixed：固定定位，元素相对于浏览器窗口进行定位。
- sticky：粘性定位，元素在滚动时根据阈值切换为固定定位。

2. 偏移属性

用于设置元素相对于其定位位置的偏移量。
包括：
- top：元素顶部偏移。
- right：元素右侧偏移。
- bottom：元素底部偏移。
- left：元素左侧偏移。

定位方式详解

静态定位（static）: 默认定位方式，元素按照正常文档流排列。- 偏移属性（top、right、bottom、left）无效。
相对定位（relative） ：相对于元素原位置偏移，保留原空间。
绝对定位（absolute） ：相对于最近定位祖先元素偏移，脱离文档流。元素相对于最近的已定位（relative、absolute、fixed、sticky）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是<html>）进行定位。
固定定位（fixed） ：相对于视口定位，常用于悬浮导航栏。元素脱离文档流，不占据原来的空间。
粘性定位（sticky） ：结合相对定位和固定定位，实现滚动吸附效果。- 需要指定 top、right、bottom 或 left 中的一个作为阈值。

常见布局详情

1、剧中布局

水平居中：

.box {
  width: 200px;
  margin: 0 auto;
}

垂直居中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

2、两栏布局

使用 float 实现：

.left {
  float: left;
  width: 200px;
}
.right {
  margin-left: 220px;
}

使用 flexbox 实现：

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}

3、三栏布局

使用 float 实现：

.left, .right {
  width: 200px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.middle {
  margin: 0 220px;
}

使用 flexbox 实现：

.container {
  display: flex;
}
.left, .right {
  width: 200px;
}
.middle {
  flex: 1;
}

4、全屏布局

使用 fixed 定位：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
}
.content {
  padding-top: 60px;
}

注意事项

1、z-index属性

用于控制定位元素的堆叠顺序。
值越大，元素越靠前。

示例：

.box1 {
  position: absolute;
  z-index: 1;
}
.box2 {
  position: absolute;
  z-index: 2;
}

2、父元素高度塌陷

当子元素使用 absolute 或 fixed 定位时，父元素的高度可能会塌陷。
解决方法：
- 使用 padding 或 min-height 设置父元素高度。
- 使用 clearfix 清除浮动。

3、性能优化

ixed 和 absolute 定位的元素会脱离文档流，频繁使用可能影响性能。
尽量使用 flexbox 或 grid 布局替代复杂的定位。

常用布局原则

子绝父相：父元素设为 position: relative，子元素用 position: absolute 精准定位。

web蓝桥杯备考（css浮动与定位）