设置元素的浮动（float）

一、了解float属性

块元素在文档流中会独占一行，自上而下排列，如果设置元素浮动，元素脱离文档流后，就不会具有元素的特点

float：设置元素的浮动

可选值：

none ； 元素正常显示，不浮动（默认值）

left  ；   元素向左浮动

right ；   元素向右浮动

浮动可以使块元素水平布局

例：设置元素左浮动

    <style>
       #outer {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
      }
      .box1{
        float: left;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
      .box3{
        background-color: indigo;
        float: left;
      }
    </style>
    <div id="outer">
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
      </div>

二、float浮动的特点

设置float浮动的特点（1）

1.设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置就不会存在，下面的元素就会上移，挤上去

2.设置元素浮动之后，元素尽量向左或向上进行移动，而且默认情况下，不会脱离父元素的范围

3.设置浮动的元素不会超过他前一个兄弟，最多是一边齐

4.如果浮动元素前一个兄弟没有浮动，则浮动元素不会超过他前面没有浮动的元素

总结：浮动主要是用于元素的水平布局

设置float浮动的特点（2）

当浮动元素遇到文字，浮动元素不会覆盖文字，而是文字会环绕在浮动元素的周围，从而实现文字环绕图片的效果

注：这是浮动最早的功能，只是后面用于水平布局

例：

    <style>
      #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
    </style>

   <div id="box">
        <div class="box1"></div>
        <p class="p1">
          者活有间韩斗谓先今德恶，舟九和，子郭章国极的非花郭不，否宫的娘生第白廿对其头羊，为即甲总保你心能和觉程上胜临韩，变感清应说人为，十尤陛救千烦才秦然两九不事应太苦败答，此洪道胜怒，洪谓五以斯作秦，花败纯破不足，弟我久锐到使姑己不死有到感有考中措时，的是只接。
          韩样统感牙范币否自了，骨讨到灰面，爱卑易，帝此娘沾全他死，帝日满与留罪，衣惜到太落千不撒，么活上己韩一一人者官准只尘特，准同王尽统航王仃活无，能快死生天洋磊，专处耳非的诗得五安谋兮里制联交，同领之会变最杀的逃别他我她才，判兼哥也当商法说身司弟搏切皮六瞠骨。
        </p>
      </div>

 

设置浮动的特点（3）

元素在文档流当中：

      块元素  ： 独占一行

      行内元素 ： 不会独占一行，不能自定义设置宽高

      行内块元素 ：兼具块元素，行内元素的特点

元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点元素也不会独占一行了，也可以设置宽高了等等