一、如何理解浮动?
在HTML中,所谓“浮动”,就是让代码中的指定标签元素“浮动”到其它元素的上方。
例如下方这个图,我们可以想象有红、绿、蓝这三个元素,那么绿色这个元素就是浮动到了其它元素的上方,然后红色和蓝色就将绿色底部的空位给补上去了。
因此,拥有浮动属性的元素不占位
二、浮动属性的应用
浮动属性最主要的应用就是:让控件能够横向排列
浮动支持的值有:left(左浮动)、right(右浮动)
下面来看这样一段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动示例</title>
<!--色块相关的样式-->
<style>
.block{
width: 100px;
height: 100px;
}
.block1{
background-color: red;
}
.block2{
background-color: green;
}
.block3{
background-color: blue;
}
</style>
<!--色块相关的样式 end-->
</head>
<body>
<!--三个色块-->
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<!--三个色块 end-->
</body>
</html>
在这段代码中,我没有给任何元素添加浮动属性,因此,它的效果是这样的:
接下来我给它们添加浮动属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动示例</title>
<!--色块相关的样式-->
<style>
.block{
width: 100px;
height: 100px;
float: left;
}
.block1{
background-color: red;
}
.block2{
background-color: green;
}
.block3{
background-color: blue;
}
</style>
<!--色块相关的样式 end-->
</head>
<body>
<!--三个色块-->
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<!--三个色块 end-->
</body>
</html>
效果就变成了这样:
可以看到,它们成功地横向排列了!!!
下面是一张浮动的总结图
特别注意的是
1.如果我只给红色的色块添加浮动的话,那么绿色和蓝色的色块是会纵向排列的,根据浮动的性质可以得知,绿色色块会被红色色块所遮挡,而蓝色色块会看起来与红色色块“纵向排列”(可以自行尝试一下哦)
2.如果单行浮动的色块非常多,一行装不下的话,那么就会换行显示,又或者某个色块的尺寸太大了,这一行装不下,那么也会换行显示
3.根据CSS中的浮动属性的出现顺序,谁先浮动谁就优先接近浮动位置
4.如果某一行出现浮动,那么这一行左右最好全部浮动,否则布局会出现问题。
好了,这些就是HTML的浮动属性的快速讲解啦