HTML + CSS 连载 | 60 - 元素浮动规则（下）
站长
· 阅读数 4
一、元素浮动规则
浮动元素不能与行内级元素的内容层叠，行内级的内容将会被浮动元素推出。
创建一个 HTML 页面，设置一个 div.box 包含行内级元素和块级元素，同时设置 div.box 的宽高以及背景颜色，具体代码如下：
<!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 元素设置左浮动：
.box strong {
float: left;
}
刷新浏览器，效果如下：
strong 设置左浮动后，脱离标准流并且紧贴包含块也就是 div.box 的左边界，但是内容没有脱离文本流，还占据着位置，就会把行内级元素的内容推出，包括 inline-block 元素内容以及块级元素的文字内容都会被浮动元素推出。
接着我们设置固定定位：
.box strong {
float: left;
position: fixed;
left: 0;
}
刷新浏览器，效果如下：
设置固定定位后，就会完全脱离标准流，文本也会脱离文本流，所以看到的现象就是 strong 层叠在 span 元素上。
图文环绕
浮动最常见的一个应用场景就是实现图文环绕，我们可以先创建一个 HTML 页面，包含图片并设置宽高，具体代码如下：
打开浏览器，效果如下：
没设置浮动之前左右两边会出现大量的空白，我们可以给图片设置左浮动：
.box img {
width: 100px;
float: left;
}
刷新浏览器，效果如下：
设置了左浮动之后就实现了图文环绕，因为文字会被浮动元素推出去，当然设置右浮动也是可以的，要注意的是浮动只能向左浮动或者向右浮动，不会向上浮动或者向下浮动，要实现向上或者向下要调整图片的位置。
这个例子也可以引出最后一个浮动的规则，即行内级元素、inline-block元素浮动后，其顶部与所在行的顶部对齐。