HTML + CSS 连载 | 60 - 元素浮动规则（下）

一、元素浮动规则

浮动元素不能与行内级元素的内容层叠，行内级的内容将会被浮动元素推出。

创建一个 HTML 页面，设置一个 div.box 包含行内级元素和块级元素，同时设置 div.box 的宽高以及背景颜色，具体代码如下：

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>
    .box {
      width: 1000px;
      height: 400px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <i>我是i元素</i>
    <div>我是普通div元素</div>
  </div>
</body>
</html>

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

先给 strong 元素设置左浮动：

css 复制代码

.box strong {
  float: left;
}

刷新浏览器，效果如下：

strong 设置左浮动后，脱离标准流并且紧贴包含块也就是 div.box 的左边界，但是内容没有脱离文本流，还占据着位置，就会把行内级元素的内容推出，包括 inline-block 元素内容以及块级元素的文字内容都会被浮动元素推出。

接着我们设置固定定位：

CSS 复制代码

.box strong {
  float: left;
  position: fixed;
  left: 0;
}

刷新浏览器，效果如下：

设置固定定位后，就会完全脱离标准流，文本也会脱离文本流，所以看到的现象就是 strong 层叠在 span 元素上。

图文环绕

浮动最常见的一个应用场景就是实现图文环绕，我们可以先创建一个 HTML 页面，包含图片并设置宽高，具体代码如下：

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>
    .box {
      width: 500px;
      background-color: orange;
    }

    .box img {
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区
    <img src="../images/juejin.png" alt="">
    稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区
    稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区稀土掘金开发者社区
    
  </div>
</body>
</html>

打开浏览器，效果如下：

没设置浮动之前左右两边会出现大量的空白，我们可以给图片设置左浮动：

css 复制代码

.box img {
  width: 100px;
  float: left;
}

刷新浏览器，效果如下：

设置了左浮动之后就实现了图文环绕，因为文字会被浮动元素推出去，当然设置右浮动也是可以的，要注意的是浮动只能向左浮动或者向右浮动，不会向上浮动或者向下浮动，要实现向上或者向下要调整图片的位置。

这个例子也可以引出最后一个浮动的规则，即行内级元素、inline-block元素浮动后，其顶部与所在行的顶部对齐。