CSS基础------详细了解float 浮动

前言: 在开始了解CSS浮动前先了解下 网页的三种布局方式

        1.标准流(文档流、普通流) 

              ①一个网页从上到下从左到右排列,类似于文本

              ②块状元素独占一行，行内元素按照顺序并排

         2.浮动float也就是本文重点

             ①浮动不占位：浮动元素不占位置
             ②默认排列成一行，遇到边界自动换行
             ③如果有文字（没有设置浮动的元素内容）会绕着浮动元素走

         3.定位分三类(相对定位、绝对定位和固定定位) 之后的文章会细说

一、float的定义和用法

       float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。            浮动元素会变成一个块级框，而不论它本身是何种元素。

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

二、使用示例

  2.1、为什么要使用浮动昵，让我们先来看看在标准流文档中 块级元素，不管设置宽度在页面中都是独占一行不能并排显示如下:

    <style>
        .div1 {
            width: 400px;
            height: 400px;
            border: 2px solid red;
        }
        .div2{
           background-color: coral;
           width: 100px;
        }
        .div3{
           background-color: yellow;
        }
    </style>

<div class="div1">
        <div class="div2">我是div1</div>
        <div class="div3">我是div2</div>
</div>

2.2、那么怎么才能让块级元素并排显示昵？ 可能有人会想到display这个属性，元素转换属性。不了解的可以看看之前的这篇文章

https://blog.csdn.net/qazzwx/article/details/104907388

   <style>
        .div1 {