一、元素浮动规则
浮动元素不能与行内级元素的内容
层叠,行内级的内容将会被浮动元素推出。
创建一个 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 页面,包含图片并设置宽高,具体代码如下:
<!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>
打开浏览器,效果如下:
没设置浮动之前左右两边会出现大量的空白,我们可以给图片设置左浮动:
.box img {
width: 100px;
float: left;
}
刷新浏览器,效果如下:
设置了左浮动之后就实现了图文环绕,因为文字会被浮动元素推出去,当然设置右浮动也是可以的,要注意的是浮动只能向左浮动或者向右浮动,不会向上浮动或者向下浮动,要实现向上或者向下要调整图片的位置。
这个例子也可以引出最后一个浮动的规则,即行内级元素、inline-block元素浮动后,其顶部与所在行的顶部对齐
。