float属性最浅显粗解

float属性最浅显粗解

行百里者半九十

float：定义元素的浮动位置

什么是浮动呢？好抽象啊！

 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>

.item{
    width:100px; 
    higth:100px;
    margin:10px;
    background-color:red;
}

如上，会生成是个红色的盒子。但相信我，和常规思维上生成的盒子排版不一样，look：

四个盒子排成纵而非一横，那是因为在没有添加css的样式去修改排列方式时，盒子的排列方式与html代码排列相同，默认进行了换行。

此时float属性的作用就体现出来了，

float:left; 元素按顺序从左往右浮动，直到放满第一列后，再自动从第二列开始浮动；

float:right; 方式同上；

.item{
    width:100px; 
    higth:100px;
    margin:10px;
    background-color:red;
    float:left;
}