CSS的position定位和float浮动详解

CSS的position定位和float浮动是CSS中非常重要的属性，掌握它们可以实现更加灵活、多样化的页面布局效果。

CSS的Position定位

CSS的Position定位属性是控制元素在文档流中的位置和方式的重要属性。常见的position属性取值有以下几种：

• static（默认）：元素遵循文档流，不进行定位。
• relative：元素相对于自己原来所在的位置进行定位。
• absolute：元素相对于其父元素进行定位。
• fixed：元素相对于浏览器窗口进行定位。

static

static定位的元素遵循文档流，在布局时不会被考虑在内。例如下面的代码：

<div class="static-demo">static定位示例</div>

CSS代码如下：

.static-demo {
  position: static;
  top: 50px; /*无效*/
  left: 100px; /*无效*/
}

则元素会按照文档流的方式进行布局，top和left属性设置均无效。

relative

relative定位的元素仍然占据文档流，相对于自身的原位置进行定位。例如下面的代码：

<div class="relative-demo">relative定位示例</div>

CSS代码如下：

.relative-demo {
  position: relative;
  top: 50px;
  left: 100px;
}

则元素相对于自己原来位置的上边缘向下50px、左边缘向右100px进行定位。

absolute

absolute定位的元素相对于其父元素进行定位，父元素必须有Position属性。例如下面的代码：

<div class="absolute-parent">
  <h3>absolute定位示例</h3>
  <div class="absolute-demo">absolute定位示例</div>
</div>

CSS代码如下：

.absolute-parent {
  position: relative;
}

.absolute-demo {
  position: absolute;
  top: 50px;
  left: 100px;
}

则元素相对于其父元素（.absolute-parent）定位，相对于父元素上边缘向下50px、左边缘向右100px进行定位。

fixed

fixed定位的元素相对于浏览器窗口进行定位，常常用于制作吸顶效果或广告等。例如下面的代码：

<div class="fixed-demo">fixed定位示例</div>

CSS代码如下：

.fixed-demo {
  position: fixed;
  top: 50px;
  left: 100px;
}

则元素相对于浏览器窗口定位，相对于窗口上边缘向下50px、左边缘向右100px进行定位。

CSS的float浮动

CSS的float浮动用于将元素从文本流中脱离出来，在一行中左对齐或右对齐，常用于制作多栏布局或图文混排等。float属性的取值有以下几种：

• left：元素向左浮动，并留出右侧区域给下一个元素。
• right：元素向右浮动，并留出左侧区域给下一个元素。
• none：默认值，元素不浮动，遵循文本流。
• clear：清除左右两侧浮动对当前元素布局的影响。

float左浮动

将元素左浮动常用于制作多栏布局，例如下面的代码：

<div class="float-demo">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS代码如下：

.float-demo {
  width: 600px;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}

.right {
  float: left;
  width: 400px;
  height: 200px;
  background-color: yellow;
}

则左侧元素向左浮动，宽度为200px，右侧元素向左依次浮动，宽度为400px，两个元素共占据一行。

float右浮动

将元素右浮动也可以用于制作多栏布局，例如下面的代码：

<div class="float-demo">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS代码如下：

.float-demo {
  width: 600px;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}

.right {
  float: right;
  width: 400px;
  height: 200px;
  background-color: yellow;
}

则左侧元素向左浮动，右侧元素向右浮动，宽度为400px，两个元素共占据一行。

clear清除浮动

如果下一个元素不希望受到上一个浮动元素的影响，需要使用clear属性清除之前的浮动。例如下面的代码：

<div class="float-demo">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
  <div class="clear"></div>
  <div class="content">正文内容</div>
</div>

CSS代码如下：

.float-demo {
  width: 600px;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}

.right {
  float: right;
  width: 400px;
  height: 200px;
  background-color: yellow;
}

.clear {
  clear: both;
}

.content {
  background-color: blue;
  color: white;
}

则左侧元素向左浮动，右侧元素向右浮动，两者共占据一行。清除浮动元素后，下一个元素“正文内容”受到了两个浮动元素的上下影响。可以通过给浮动元素外再包含一个容器来解决这个问题。

以上是“CSS的position定位和float浮动详解”的攻略，希望能对您有所帮助。