css浮动

浮动

float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

看一个例子

html结构：

<div class="box1"></div>
 <div class="box2"></div>
 <span>zhh home</span>

css样式：

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。