HTML：厉害的浮动（浮动的特点）

top9523

于 2022-06-27 15:11:21 发布

阅读量653

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/top9523/article/details/125484173

版权

理论基础：
浮动：让元素漂浮起来

作用：实现横向排列

只要想横向排列，就用浮动！

单词：float

值：left====让元素像左漂浮

right===让元素像右漂浮

首先以三个小盒子为例，详细介绍浮动是什么？怎么实现浮动？

<style>
.a1{
width: 50px;
height: 50px;
background-color: #ff0;
}
.a2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.a3{
width: 150px;
height: 150px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="a1">box1</div>
<div class="a2">box2</div>
<div class="a3">box3</div>
</body>

实现效果：

情况一：给第二个盒子加左浮动 .a2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
实现效果：

子2漂浮起来，盒子3顺势占领了盒子2的位置，但是没有将盒子3的文字覆盖住

归纳特点：1、元素一旦做了浮动，就会漂浮起来不占位置，后面的元素会向前补齐

2、浮动的元素是覆盖不了文字和图片的

（前两条专业话术：半脱离文档流/半脱标）

情况二：第二个盒子和第三个盒子都做左浮动

实现效果：

第二个盒子漂浮以来向左，第三个接着飘起来在第二个盒子后面排队。

情况三：给三个盒子全部做左漂浮操作

实现效果：

三个盒子从一到三排列整齐，成横向排列

情况四：给盒子二和盒子三设置向右漂浮的样式，盒子一不做设置。

实现效果：

盒子二先像右飘走了，三紧追其后，排在了它的后面。

情况四：给三个盒子都添加像右浮动的样式

实现效果：

三个盒子在右边从一到三排列整齐，成横向排列

归纳特点：

3、如果多个元素做的都是左浮动，那么元素就是从左到右依次横向排列；

如果多个元素做的都是右浮动，那么元素就是从右到左依次横向排列

情况五：设置多个盒子，超过浏览器一行所能容纳的数量

实现效果：

根据浏览器的大小，自动变化

归纳特点：

4、如果一行放不下了，是会自动换行的。

情况六：将盒子一的宽度取消，只设置高度，然后给盒子一设置左浮动。 <style>
.a1{
height: 100px;
background-color: #ff0;
float: left;
}
</style>
</head>
<body>
<div class="a1">box1</div>
</body>
未加浮动前的实现效果：

加浮动后的实现效果：

归纳特点：

5、如果没有设置宽度，并且元素做了浮动，那么这个元素的宽度是由内容决定的。

情况七：为 <span>标签等一系列横向排列的标签设置浮动 <style>
.a1{
height: 200px;
width: 200px;
background-color: #ff0;
float: left;
}
</style>
</head>
<body>
<span class="a1">我是一个可爱的span标签</span>
</body>
未加浮动前的实现效果：

设置宽和高没有用哦~

加浮动后的实现效果：

归纳特点：

6、元素一旦做了浮动，那么无论是什么元素都可以添加宽高了。

清除浮动：
清除浮动=====清除的是浮动带来的不好的影响===后面元素向前补齐

谁受到了影响就加给谁

清除浮动：clear：

clear：left;（清除前面盒子左浮动带来的影响）

clear：right;（清除前面盒子左浮动带来的影响）

clear：both；（两端同时清除）

谁不想受到影响！谁不想补位！谁就用浮动！

浮动的知识就这么多啦~用到的地方很多，比如页面构图呀，制作导航栏呀，都可以用到浮动。可以跟着做一个小练习哦~根据浮动做出如下效果

我是这样做的： <style>
.a00{
width: 600px;
}
.div1{
background-color: pink;
height: 100px;
width: 600px;
color: black;
line-height: 100px;
text-align: center;
font-weight: 700;
font-size: 26px;
}

.div2{
height: 250px;
}
.a1{
height: 250px;
width: 200px;
background-color: orange;
float: left;
font-size: 26px;
text-decoration:underline ;
font-style: italic;
}
.a2{
height: 250px;
width: 200px;
background-color: rgb(51, 190, 233);
float: right;
font-size: 26px;
text-decoration:underline ;
font-style: italic;
}

.div3{
height: 150px;
}
.b1{
width: 200px;
height: 150px;
background-color: blue;
float: left;
}
.b2{
width: 200px;
height: 150px;
background-color: yellow;
float: left;
}
.b3{
width: 200px;
height: 150px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="a00">
<div class="div1">
头部
</div>
<div class="div2">
<div class="a1">左边</div>
<div class="a2">右边</div>
</div>
<div class="div3">
<div class="b1">左</div>
<div class="b2">中</div>
<div class="b3">右</div>
</div>
</div>
</body>