H5-27 浮动

标签：浮动 27 color H5 width background height 200px

1、浮动的定义

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

值	描述
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;      }  

 

 

 

标签：浮动,27,color,H5,width,background,height,200px
From： https://www.cnblogs.com/zhangxiaoguo/p/18586951