CSS学习之float解析

转自：http://www.w3cplus.com/css/float.html

一、float是什么？

float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：

文档流：在html中文档流即为元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离。
最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。

二、float造成的影响

2.1 对其父元素的影响

对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下所示。

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 对其兄弟元素（非浮动）的影响

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 对其兄弟元素（兄弟元素为浮动）的影响

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>

2.4 float对自身元素的影响

float对象将被视作块对象(block-level)，即display属性等于block。

2.5 float对子元素的影响

我们知道当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从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>

2.6 float对自身元素的影响

2.6.1 父元素之外的非浮动元素

从上面可知，当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，也就是父元素的宽高都为0。并且其父元素之外的非浮动元素也会无视该浮动元素，浮动元素仿佛到了另外一个世界里。

...
<style>
    .divBox{ border:1px solid red; width: 350px;}
    .divBox-01{ background-color: orange; width: 100px; height: 100px; }
    .divOuter{ border:1px solid blue; width: 350px; height: 150px;}

    .fl{ float: left; } /*左浮动*/
</style>
</head>
<body>
    <div class="divBox"><div class="divBox-01 fl">我是浮动元素</div>
    </div>
    <div class="divOuter">我是父元素之外的非浮动元素</div>
</body>

2.6.2 父元素之外的浮动元素

当浮动元素的父元素之外的元素为浮动元素时，他们仿佛去到了同一个世界里。

两个元素的浮动方向相同时

...
<style>
    .divBox{ border:1px solid red; width: 350px;}
    .divBox-01{ background-color: orange; width: 100px; height: 100px; }
    .divOuter{ border:1px solid blue; width: 350px; height: 150px;}

    .fl{ float: left; } /*左浮动*/
</style>
</head>
<body>
    <div class="divBox">
        <div class="divBox-01 fl">我是浮动元素</div>
    </div>
    <div class="divOuter fl">我是父元素之外的浮动元素</div>
</body>

两个元素的浮动方向相反时：

...
<style>
    .divBox{ border:1px solid red; width: 350px;}
    .divBox-01{ background-color: orange; width: 100px; height: 100px; }
    .divOuter{ border:1px solid blue; width: 350px; height: 150px;}

    .fl{ float: left; } /*左浮动*/
    .fr{ float: right; } /*右浮动*/
</style>
</head>
<body>
    <div class="divBox">
        <div class="divBox-01 fl">我是浮动元素</div>
    </div>
    <div class="divOuter fr">我是父元素之外的浮动元素</div>
</body>

当divBox浮动元素（divBox-01）的总宽度大于父元素之外的浮动元素（divOuter）的左边距时，divOuter会另起一行

<style>
    .divBox{ border:1px solid red; width: 1000px;}
    .divBox-01{ background-color: orange; width: 100px; height: 100px;margin-right: 10px; }
    .divOuter{ border:1px solid blue; width: 350px; height: 150px;}

    .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-01 fl">我是浮动元素</div>
        <div class="divBox-01 fl">我是浮动元素</div>
        <div class="divBox-01 fl">我是浮动元素</div>
        <div class="divBox-01 fl">我是浮动元素</div>
        <div class="divBox-01 fl">我是浮动元素</div>
    </div>
    <div class="divOuter fr">我是父元素之外的浮动元素</div>
</body>

三、总结：

实际上关于float在页面中带来的影响还有许多，只是它们存在于各种特定的场景，无法一一列举，本文也并非想要穷举所有的情况，只是希望同学们能通过本文而来了解float是什么，以及它对文档所造成的破坏。只有深刻理解了它的含义才能以在各种不同的场景随机应变地使用float这个神奇的东西。

posted @ 2016-04-19 22:34 奔跑的蜗牛~ 阅读(467) 评论(0) 编辑收藏举报

刷新页面返回顶部

奔跑的蜗牛

知识不是占有...