Position布局模型-float浮动模型

float流动模型

• 基础float属性

我们知道块状元素都会独占一行，如果想要让两个元素并排显示就需要使用浮动模型来实现。
这里会讲两个内容，一个是浮动的基础属性，另一个就是浮动的破坏性和兼容性。

基础float属性

float：left；设置左浮动

 div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }
    <div class="div1"></div>
    <div class="div2"></div>

float:right;设置右浮动

div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: right;
        }
     <div class="div1"></div>
    <div class="div2"></div>     

设置左右浮动

        .div1 {
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid red;
            float: left;
        }
        .div2 {
            width: 200px;
            height: 200px;
            background: blue;
            border: 1px solid red;
            float: right;
        }
    <div class="div1"></div>
    <div class="div2"></div>