前言
定义
浮动是一种在布局中常用的CSS属性，它使元素脱离文档流，根据指定的方向在父元素中移动。浮动的元素会向左或向右漂浮，并且浮动元素之间可以相互靠近，从而实现页面的布局。通常用来实现多列布局、文字环绕图片等效果。
作用
- 实现文字环绕效果
- 导致一个元素脱离文档流
- 可任意让块级元素水平排列
- 浮动元素可以用margin，但是不能使用margin：0 auto;
代码分析
代码一
<!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>
img{
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img2.baidu.com/it/u=4194115798,4169726391&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1714582800&t=3381545a39fe6b784d384f77dc43e683" alt="">
<p>在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。在繁忙的都市中，有一个宁静的角落。那里，阳光透过树叶洒在地面上，形成斑驳的光影。微风拂过，带来了远处花儿的香气。人们在这里漫步，或是静静地坐着，享受着这份难得的宁静与和谐。</p>
</div>
</body>
</html>
效果图
给img设置浮动
img{
width: 100px;
float: left;
}
效果图
分析
设置浮动后，可以实现文字包围图片的效果，并且图片不会遮挡住文字。
给img设置绝对定位
img{
width: 100px;
position: absolute;
left: 0;
top: 0;
}
效果图
分析
给img设置绝对定位时可以实现效果，但是图片会遮挡文字。
代码二
<!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>
li{
list-style: none;
}
.item{
width: 200px;
height: 50px;
}
.item:nth-child(1){
background: #c97171;
}
.item:nth-child(2){
background: #6c86d3;
}
.item:nth-child(3){
background: #668929;
}
</style>
</head>
<body>
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</body>
</html>
效果图
现在我们要实现三个li一行排列的效果
.item{
width: 200px;
height: 50px;
display: inline-block;
}
效果图
实现三个li紧挨着
ul{
font-size: 0;
}
li{
list-style: none;
font-size: 20px;
}
.item{
width: 200px;
height: 50px;
display: inline-block;
}
效果图
浮动元素可以用 margin，但是不能使用margin：0 auto
.item{
width: 200px;
height: 50px;
float: left;
margin: 10px;
}
.item{
width: 200px;
height: 50px;
float: left;
margin: 0 auto;
}
分析 上面的 margin: 0 auto是没有实现效果的。
代码三
<!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>
li{
list-style: none;
font-size: 20px;
}
.item{
width: 200px;
height: 50px;
float: left;
}
.item:nth-child(1){
background: #c97171;
}
.item:nth-child(2){
background: #6c86d3;
}
.item:nth-child(3){
background: #668929;
}
</style>
</head>
<body>
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
<div class="title">这是标题</div>
</body>
</html>
分析
原本我们想要的效果是标题在列表下面的，但是由于列表设置了浮动，浮动带来的影响，所以我们就要来清除浮动带来的影响。
解决方案
- 设置父元素的高度
ul{
height: 50px;
}
- 在父元素结束之前添加一个空元素，并设置 clear：both；
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<div class="end"></div>
</ul>
.end{
clear: both;
}
- 借助伪元素 ::after 清除浮动
ul::after{
content:'';
clear: both;
display: block;
}
- 把父元素设置成BFC 容器(下篇文章单独介绍)
.clear::after{
content:'';
clear: both;
display: block;
}
<ul class="clear">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
- 给后面受影响的元素设置 clear：both；
.title{
clear: both;
}
分析
能够观察到清除浮动后ul有了高度。
结语
这五种清除浮动的方法有没有学会呢？下面总结一下吧~
- 设置父元素的高度
- 在父元素结束之前添加一个空元素，并设置 clear：both；
- 借助伪元素 ::after 清除浮动
- 把父元素设置成 BFC 容器
- 给后面受影响的元素设置 clear：both；