《css设计彻底研究》读书笔记之 float 浮动原理
一、定义
css中有一个float属性，他的属性值：
none : 默认属性，未定义float时，即为none，也就是标准流通常的情况
left : 左浮动，元素会向其父级的左侧靠紧，同时，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定
right : 右浮动，元素会身其父级的右侧靠紧，同时，跟左浮动一样，元素本身的宽度不再伸展，而根据元素内部的内容的宽度来确定
二、通过实例看原理
首先，我先了写这样一段代码，用来作为实验用：
css:
1 .wrap{border:1px solid #f00; padding:5px;} 2 .box-1{border:2px dotted #0f0; background:#ccc;} 3 .box-2{border:2px dotted #00f; background:#ccc;} 4 .box-3{border:2px dotted #0ff; background:#ccc;} 5 .text{border:2px dotted #000; background:#eee;}
html:
1 <div class="wrap"> 2 <div class="box-1">box-1</div> 3 <div class="box-2">box-2</div> 4 <div class="box-3">box-3</div> 5 <p class="text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> 6 </div>
在浏览器中的表现:
现在实验开始，我先给box-1加个float:left;属性，则在浏览中的表现形式为：
这里有个很关健的地方，就是我们要先确定box-1和box-2两个div之间的位置关系，其实，此处由于box-1设了float:left；所以box-2自动顶替原先box-1所占位置，并且box-2的文字环绕住box-1，也就是说，类似于box-1盖在了box-2上面，且使box-2的文字环绕box-1元素，如果到这里还不清楚，我们可以再给box-2加个float:left,在浏览器中的表现形式为：
可以发现，由于box-2设置了float:left,所以box-3顶替了原来box-2的位置，并使自己的文字环绕box-2，如果我们再给box-3也设个float:left，也会产生相同的效果，即：
有人可能会认为后面的原素并没有顶替掉box-3的位置，而是向下偏移了一段距离，这其实是下面元素本身的问题，因为下面的元素是个p标签，而p标签本身表示段落的意思，他是有默认的margin值的，所以，只要给p设置一个 margin:0; 就会回归到我们想像中的样子，如图:
同理，float:right，也是相同的原理，大家若有兴趣可以自己验证一下
