css第十一课：浮动属性

✍ 学习原因：

学习浮动属性的原因看最下面的“总结” 

✍ 学习内容：

一：浮动

 

✍ 如果这个时候绿色文档浮动起来，文档排列就成了下面这个情况：

 绿色浮动以后，就飘起来了，红色自然而然就上去顶替了原来绿色的位置，蓝色也一样

过程就像下面3D图示一样：

浮动前：正常文档排列

 浮动后：

 代码实现：

 因为一个div占一行显示，此时上面的代码有三个背景颜色不一样的div标签，每一个一行显示，按正常的文档显示，就是向下排列的三个，结果如下所示：

 

 ✍我们又想把它们浮动起来呢，看下面代码：

 结果：

 上面我们用float：left让红色浮动起来了，而且将绿色的宽度加大了，你会发现红色浮动起来以后，绿色就去了原来红色的位置，但是有一部分被红色挡住了，没显示完全。

 

✍接下来我们让三个颜色都浮动起来：

 结果：

 

✍ 如果现在我们有多个div标签，都想浮动，那要是一行排不开怎么办，看结果：

 排不开的话就另外起行继续排。

✍当我们都改为右浮动时，代码如下：

 结果：

 

✍当我们这个背景大小很大时，又该怎么排列呢，代码如下：

 结果：

 因为它们都是left左排列，应该是先红色，再往右是绿色，然后往右是蓝色，但是因为绿色右边不够放蓝色的了，那也应该按照另起一行再排列，也就是蓝色排在红色下面，不是的哦，这就是它的特殊之处，它会见缝插针，如果有空隙他就会把自己放进去排列，而不是另起一行排。

✍如果我们将绿色背景上放上文字呢，还让红色背景浮动，将绿色背景放大一点，思考一下我们的文字会被挡住吗？

代码如下：

结果： 

 结果发现这个文字不会被挡住，会被红色部分挤出来。

✍总结：我们为什么要学浮动属性，

原因是：浮动的作用是为了让竖着显示的东西横着显示

例如div标签，它是独占一行的标签，但是我们用不了那么大的空间，所以可以将多个div标签浮动起来横着放，就像下面百度的效果

看下面百度的图示：

总结的图示：

 

二：清浮动

例如现在我们有三个标签设置了背景颜色，如下图这样正常排列，此时我们让红色标签浮动起来，这时候本来绿色标签就跑上去了，在红色标签原来的位置，被红色标签覆盖，但是我们不想让红色标签把它给覆盖住，就涉及到我们接下来要讲的清浮动，又称高度塌陷

知识点总结图：

 原代码：

结果：

一共有四种方法：

✍第一种：写固定高度

 结果：

当背景浮动起来就没有实际含义的高度了，所以我们在下面给他们写一个固定的高度在这里，写死了，就可以了

✍第二种：用clear清浮动

代码：

 给添加了红色背景的div标签身上增加clear属性，因为红色被覆盖了所以要把clear加在红色背景身上，就是说谁被浮动标签覆盖了clear属性就加在谁身上，而且浮动是左浮动，就清除左浮动，是右浮动就清除右浮动，这里因为前面两个颜色是左浮动，所以在红色上加清除左浮动的属性

结果：

✍ 第三种方法：谁浮动谁就在自己什么加上清浮动的标签，不影响后面的标签

 结果：

 ✍第四种方法：bfc让浮动元素计算高度

 代码：

结果：