H5-27 浮动

1、浮动的定义

　　 float属性定义元素在哪个方向浮动，任何元素都可以浮动。

值	描述
left	元素向左浮动
right	元素向右浮动

 

 

 

2、浮动的原理：

　　①浮动以后使元素脱离了文档流

　　②浮动只有左右浮动，没有上下浮动

3、元素向左浮动

　　脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

    <div class="xiao"></div>

    <div class="da"></div>

 

 .xiao{

            width: 200px;

            height: 200px;

            background-color: aqua;

            float: left;

        }

        .da{

            width: 400px;

            height: 400px;

            background-color: blueviolet;

        }

 

　标准流：　

 

脱离标准流：

4、元素向右浮动　　

　　<div class="xiao"></div>

    　<div class="da"></div>

　　

.xiao{

            width: 200px;

            height: 200px;

            background-color: aqua;

            float: right;

        }

        .da{

            width: 400px;

            height: 400px;

            background-color: blueviolet;

        }

 5、所有元素向左浮动

　　当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

  <div class="a1"></div>

  <div class="a2"></div>

  <div class="a3"></div>

 

 div{

        width: 200px;

        height: 200px;

        float: left;

     }

     .a1{

        background-color: red;

     }  

     .a2{

        background-color: blue;

     }

     .a3{

        background-color:green;

     }

6、当容器不足时

　　当容器不足以横向摆放内容时候，会在下一行摆放

　　<div class="hezi">

        <div class="a1"></div>

        <div class="a2"></div>

        <div class="a3"></div>

        </div>

　　

    .hezi{

        width: 500px;

        height: 500px;

        background-color: #666;

    }

     div{

        width: 200px;

        height: 200px;

        float: left;

     }