css的浮动属性是什么？其值有哪三个？

1. 概述

在网页制作中，为了美观和布局需要，我们常常使用浮动属性来定位元素的位置。具体来说，浮动的作用是使元素脱离文档流，然后根据自身属性向其父元素或兄弟元素进行定位。在 CSS 中，浮动属性的语法为：

选择器 {
  float: none | left | right;
}

其中，选择器代表要设置浮动属性的元素选择器，float为浮动属性名称，其后的三个值表示其属性值，具体如下：

none：不浮动，默认值；

left：向左浮动；

right：向右浮动。

2. 浮动元素的影响

浮动元素对周围元素的影响很大，特别是当浮动元素与其周围元素重叠时尤其明显。在布局时，需要仔细考虑浮动元素的大小和位置，避免出现影响页面布局的问题。

2.1 浮动元素的脱离文档流

浮动元素会脱离文档流，不再占据其在文档流中的位置。比如下面的例子，在一个父元素中有两个子元素，其中一个子元素设置了浮动属性，可以看到浮动元素脱离了文档流，另一个子元素依然保持在原来的位置，没有受到浮动元素的影响：

<style>
  .float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #F5DEB3;
    margin-right: 20px;
  }
  .normal {
    width: 100px;
    height: 100px;
    background-color: #FF6347;
    display: inline-block;
  }
</style>
<div>
  <div class="float">我是浮动元素</div>
  <div class="normal">我是普通元素</div>
</div>

2.2 浮动元素的位置定位

浮动元素根据自身属性向其父元素或兄弟元素进行定位，可以设置浮动元素距离上下左右元素的距离。如下面的例子，在一个父元素中有三个子元素，其中一个子元素设置了浮动属性，并且距离左边的距离为 100px，由于浮动元素脱离了文档流，另外两个子元素自动在其下方排列，而不会被其遮盖：

<style>
  .float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #F5DEB3;
    margin-right: 20px;
    margin-left: 100px;
  }
  .normal {
    width: 100px;
    height: 100px;
    background-color: #FF6347;
    display: inline-block;
  }
</style>
<div>
  <div class="float">我是浮动元素</div>
  <div class="normal">我是普通元素</div>
  <div class="normal">我是普通元素</div>
</div>

3. 浮动元素的使用场景

浮动元素的使用场景多种多样，可以用来制作导航菜单、图文混排、多栏布局等等。下面介绍几种常见的使用场景。

3.1 简单导航菜单

在网页制作中，导航菜单是非常重要的一部分，通过设置浮动属性可以实现简单的导航菜单效果。下面的例子中，通过设置 a 标签为块级元素，并且设置浮动属性，实现了简单的导航菜单，保证了菜单链接的排列顺序：

<style>
  .nav a {
    display: block;
    float: left;
    padding: 10px 20px;
    background-color: #F5DEB3;
    margin-right: 10px;
  }
</style>
<div class="nav">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
  <a href="#">加入我们</a>
  <a href="#">登录</a>
  <a href="#">注册</a>
</div>

3.2 图文混排

在某些场景下需要对文字和图片进行排版，比如新闻列表中的新闻缩略图。可以通过设置图片为浮动元素，实现图片和文字的排列。下面的例子中，设置图片为块级元素，并且设置左浮动，实现了文字和图片的排列：

<style>
  .news li {
    overflow: hidden;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .news img {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
</style>
<ul class="news">
  <li>
    <img src="https://picsum.photos/100/100" alt="">
    <p><strong>这里是标题</strong></p>
    <p><strong>这里是新闻简介</strong></p>
  </li>
  <li>
    <img src="https://picsum.photos/100/100" alt="">
    <p><strong>这里是标题</strong></p>
    <p><strong>这里是新闻简介</strong></p>
  </li>
  <li>
    <img src="https://picsum.photos/100/100" alt="">
    <p><strong>这里是标题</strong></p>
    <p><strong>这里是新闻简介</strong></p>
  </li>
</ul>

这里是标题

这里是新闻简介

这里是标题

这里是新闻简介

这里是标题

这里是新闻简介

3.3 多栏布局

多栏布局是网页制作中比较常见的一种布局方式，通过设置浮动元素可以很容易地实现。下面的例子中，通过设置左边元素为浮动元素，右边元素为文档流元素，实现了两栏布局：

<style>
  .column {
    overflow: hidden;
    margin-bottom: 20px;
  }
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: #F5DEB3;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
    background-color: #FF6347;
  }
</style>
<div class="column">
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
</div>
<div class="column">
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
</div>

左边栏

右边栏

左边栏

右边栏

4. 总结

通过上面的介绍可以看出，浮动元素在网页制作中有着非常重要的地位，可以实现很多排版布局效果。但是，在使用浮动元素时需要注意，要考虑到元素之间的排列顺序，避免元素之间重叠，影响整体布局。