初识CSS样式-浮动样式float

我们都知道div标签是独占一行的，那么如何让独占一行的DIV元素并排显示呢？

这一个时候 就需要使用到float样式了  也就是浮动样式。

浮动样式的特点：

1.浮动样式可以让 HTML元素在父级元素内 进行一排码放 但宽度不够使，元素会自动到第二行码放。

语法：float:left  float:right

<style type="text/css">
  .box {
    width:500px;
    height:100px;
    background:gray;
  }
  
  .one {
    width:100px;
    height:100px;
    background:red;
    float:left;
  }
  
  .two {
    width:100px;
    height:100px;
    background:green;
    float:left;
  }
  
  .three {
    width:200px;
    height:100px;
    background:blue;
    float:left;
  }
  
  .four {
    width:100px;
    height:100px;
    background:yellow;
    float:left
  }
</style>

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four">
  
</div>