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

理论基础：

浮动：让元素漂浮起来

作用：实现横向排列

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

单词：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>

有更简单的方法欢迎评论区交流~哈哈哈~

特点：

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

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

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

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

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

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

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

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