float属性理解

float属性详解 分析

float属性在css中是很常用到的一个属性，对于初学者和刚接触前端的人说，这是一个容易迷惑和出错的地方，用的好的话，对自己是帮助，用不好的话，对自己那就是灾难。
-float基础知识
float : 浮动的意思，，由于标准文档流是从上到下依次排列的，所以这里这个浮动也就是指定是从左或者从右进行浮动了。
使用float属性的时候尤其要注意的是 设置为浮动的组件会从当前文档流中脱离，同时，该浮动元素影响的不仅仅是自己，对周围也有浮动的影响。
例如：
<div class="box">
<span class="floatSpan">
浮动元素
</span
普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流普通文档流
</div>
css代码如下

.box{ background-color: #FF00DE;
padding: 10px;
width:1000px;
height: 200px;
}
.floatSpan{
float: left;
margin: 10px;
width:100px;
height: 70px;
background-color: #CCCCCC;
}

效果如下：

由图可以看出，span元素本来是一个内联元素，不能设置宽高，但是在把其设置为浮动元素后就成为了块级元素，可以设置宽高了，但是同时它有没有换行，仅仅是以自己的宽度来撑开，并尽力向左浮动。

在了解float属性的细节之前，我们首先要知道，浮动元素的包含块的概念： 距离浮动元素最近的上一级的元素，不管元素是块级元素还是行级元素，只要设置了float属性，那这个元素就具有块级元素的特性，可以进行设置宽高。