标签：
转自：http://www.w3cplus.com/css/float.html
float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下所示。
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习之float解析</title> <style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox-01{ background-color: blue; border:solid 1px #ccc; width: 100px; height: 100px; } .fl{ float: left; } /*左浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> </div> </body> </html>
2.2.1 如果兄弟元素为 块级元素
在现代浏览器和IE8+下，该元素(即兄弟元素)会忽视浮动元素而占据它的位置，并且会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug”.
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习之float解析</title> <style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox-01{ background-color: blue; width: 100px; height: 100px; } .divBox-02{ background-color: orange; width: 200px; height: 200px; } .fl{ float: left; } /*左浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <div class="divBox-02">我是块级兄弟元素</div> </div> </body> </html>
现代浏览器及ie8+：
ie7:
ie6:
2.2.2 如果兄弟元素为 内联元素
则元素会环绕浮动元素排列。
...
<style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox img{ width: 230px } .divBox-01{ background-color: blue; width: 100px; height: 100px; } .fl{ float: left; } /*左浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <img src="images/1.jpg" alt=""> </div> </body>
2.3.1 同一个方向的浮动元素：
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
可以用这样一个形象的比喻来描述： 在一个购票中心，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。
但这条购票队列还是位于当前的购票中心中 ，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。
...
<style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox-01{ background-color: blue; width: 100px; height: 100px; } .divBox-02{ background-color: orange; width: 100px; height: 100px; } .fl{ float: left; } /*左浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <div class="divBox-02 fl"></div> </div> </body>
2.3.2 反向的浮动元素：
正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票 队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的，因此他们在同一条水平线上。
但当购票中心过窄或者左右两边的购票队列过长时，其中一条队列则会另起一行排列（此处为B队列，有人可能会问为什么不是A队列另起一行？从下面HTML结 构上可知，这是因为在时间上，A队列比B队列更早地建立，根据先到先得的原则，B队列的购票者在位置不够的时候自然要另起了一行了）。
...
<style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox-01{ background-color: blue; width: 100px; height: 100px; border:1px solid #333; } .divBox-02{ background-color: orange; width: 100px; height: 100px; border:1px solid #333; } .fl{ float: left; } /*左浮动*/ .fr{ float: right; } /*右浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> <div class="divBox-02 fr"></div> <div class="divBox-02 fr"></div> </div> </body>
当同一行中连一个购票者的位置都容不下时，两条队列则会错开两行
<style> .divBox{ border:solid 1px red; width: 350px; padding: 20px; } .divBox-01{ background-color: blue; width: 100px; height: 100px; border:1px solid #333; } .divBox-02{ background-color: orange; width: 100px; height: 100px; border:1px solid #333; } .fl{ float: left; } /*左浮动*/ .fr{ float: right; } /*右浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> <div class="divBox-02 fr"></div> <div class="divBox-02 fr"></div> </div> </body>
float对象将被视作块对象(block-level)，即display属性等于block。
我们知道当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
...
<style> .divBox{ border:solid 1px red; padding: 20px; } /*此处，去掉了固定宽度值*/ .divBox-01{ background-color: blue; width: 100px; height: 100px; border:1px solid #333; } .fl{ float: left; } /*左浮动*/ .fr{ float: right; } /*右浮动*/ </style> </head> <body> <div class="divBox"> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> </div> </body>
当我们给外层的divBox加上浮动后：
<div class="divBox fl"> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> </div>
当divBox内部既有浮动元素，又有非浮动元素时：
<style> .divBox{ border:solid 1px red; padding: 20px; } .divBox-01{ background-color: blue; width: 100px; height: 100px; border:1px solid #333; } .divBox-02{ background-color: orange; width: 260px; height: 160px; border:1px solid #000; } .fl{ float: left; } /*左浮动*/ </style> </head> <body> <div class="container"> <div class="divBox fl"> <div class="divBox-01 fl"></div> <div class="divBox-01 fl"></div> <div class="divBox-02"></div> </div> </div>
未完待续...
标签：
原文地址：http://www.cnblogs.com/lvmylife/p/5410516.html
