HTML + CSS 连载 | 58 - CSS 元素浮动

一、认识浮动

CSS 浮动属性 float 可以指定一个元素沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它。

float 属性最初只用于在一段文本内浮动图像，实现文字环绕的效果，由于早期的 CSS 标准中并没有提供好的左右布局方案，所以在很长一段时间里面 float 成为网页多列布局最常用的工具。

与绝对定位一样，浮动也会让元素脱离标准流。

通过给 float 属性设置值，来让元素产生浮动，常用取值如下：

none：不浮动，默认值
left：向左浮动
right：向右浮动

二、浮动的规则

浮动规则一：元素一旦浮动后，就脱离标准流

元素浮动脱离标准流后会朝左或者朝右移动，直到自己的边界紧贴着包含块（一般是指父元素）或者其他浮动元素的边界位置，由于定位元素也是脱离标准流的，定位元素会层叠在浮动元素上面。

创建一个 HMTL 文件，包含两个 div 元素，并分别设置不同的背景颜色，具体代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item1 {
      background-color: #f00;
    }

    .item2 {
      background-color: #ff0;
    }
  </style>
</head>
<body>
  <div class="item1">1</div>
  <div class="item2">2</div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

div 为块级元素会独占一行，接下来给 div.item1 添加浮动，具体代码如下：

CSS 复制代码

.item1 {
  float: left;
  background-color: #f00;
}

设置 div.item1 左浮动后，效果如下：

div.item1 会脱离标准流，但是 div.item2 还没有脱离标准流，所以 div.item1 的宽度由内容来决定并且会紧贴 div.item2 的边界。

接下来我们可以将浮动改为固定定位，并且设置左上的偏移都为 0，具体代码如下：

CSS 复制代码

body {
  margin: 0;
  padding: 0;
}

.item1 {
  /* float: left; */
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0f0;
}

设置了固定定位后 div.item1 会覆盖在 div.item2 上，这就是定位和浮动的区别，浮动是会紧贴着 div.item2 的边界。

我们可以将 div.item1 往下移动 10px，具体代码如下：

CSS 复制代码

.item1 {
  /* float: left; */
  position: fixed;
  top: 10px;
  left: 0;
  background-color: #0f0;
}

可以看到 div.item1 确实盖在了 div.itme2 上

我们可以注释掉 div.item1 的定位并再取消浮动的注释，同时给 div.item2 添加上右浮动，具体代码如下：

CSS 复制代码

.item1 {
  float: left;
  /* position: fixed;
  top: 10px;
  left: 0;*/
  background-color: #0f0;
}

.item2 {
  float: left;
}

设置浮动之后，就不会再占据整行的宽度，并且浮动元素会紧贴边界：

设置 div.item2 为右浮动：

css 复制代码

.item2 {
  float: right;
}

两个 div 元素都会紧贴自己包含块（body）的边界，效果如下：

当然我们也可以将 div.item1 和 div.item2 放到一个 div.box 中：

html 复制代码

<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

并设置 div.box 的宽高以及居中：

CSS 复制代码

.box {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 0 auto;
}

刷新浏览器，效果如下：

可以看到两个浮动元素 div.item1 和 div.item2 都是紧贴着自己的包含块 div.box 的边界的。

浮动规则二：浮动元素不能超过包含块的边界

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超过包含块的左（右）边界。

拷贝上一个 HTML 文件，并给 div.box 添加一个内边距：

CSS 复制代码

.box {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin: 0 auto;
  padding: 10px;
}

在浏览器中打开 HTML 页面，效果如下：

浮动元素 div.item1 和 div.item2 没有超出包含块的左右边界位置。