说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一-HTML教程-爱易网页

说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一

日期：2014-05-17　浏览次数：20758 次

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一
浮动特性非常有用，3大布局核心之一。虽然如此，它涉及内容过多，浏览器兼容性问题也很多。它的定位不仅涉及包含块，还涉及到了行框，块框，还有行内框等内容；并且，各浏览器对其的支持还有不少兼容性问题。因此，它既是美梦又是噩梦。
那么，浮动产生的困惑缘何而生，又由何而灭呢？一切都由W3C标准来定夺吧……

float 特性
'float'

适用于哪些元素
可设置给任意元素，但只适用于生成非绝对定位框的元素。
例：

HTML code

<div style="width:500px; height:150px; border:1px solid green; position:relative;">
    <div style="width:100px; height:100px; float:right; position:absolute; border:1px solid red;">absolute</div>
    <div style="width:100px; height:100px; float:right; position:relative; border:1px solid red;">relative</div>
</div>

截图：

可见，对于绝对定位的元素，浮动没有任何效果。这也体现了浮动和绝对定位之间的一种平衡。
而且，用Firefox的Firebug查看，你会发现，对于绝对定位元素计算后的 “float” 值，是”none”，而不是”right”。Chrome中则是 right……

特值的含义
该属性指定框应当向左右移动或者不移动。特性值有如下含义：
left
该元素产生一个向左浮动的块框。内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受'clear'属性的影响）。
right
与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。
none
该框不浮动。

这个大家应该都比较清楚吧，不再浪费篇章举例了。

浮动细则

1. 对于根元素的浮动，浏览器应该当作 none
根元素无所谓是否浮动，没有实际意义。

2. 左浮动框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则
以上的话，看起来有点绕眼……
是这么个意思，左浮动元素的左 margin 最多紧贴包含块的左边界。注意，是margin edge，不是border edge也不是content edge。关于边界 (edge) 见：说说标准——你真的了解盒子模型(box model)吗？

HTML code

<style type="text/css">
    .sub {
       width: 100px;
       height: 100px;
       background-color: green;
       margin:0 20px;
    }
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
    <div class="sub" style="float:left;">left</div>
    <div class="sub" style="float:right;">right</div>
</div>

示意图：

3. 如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。
也就是说，浮动元素的定位受先前生成的浮动框的影响。后面的浮动元素，需要紧挨着先前同向浮动元素的 margin 边进行定位，如果空间不足，则折行，放置到它之前元素的下面。
例如：

HTML code

<style type="text/css">
    .sub {
       width: 200px;
       height: 100px;
       background-color: green;
       margin:10px;
    }
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
    <div class="sub" style="float:left;">left1</div>
    <div class="sub" style="float:left;">left2</div>
    <div class="sub" style="float:left;">left3</div>
</div>

截图：

如上图中，把left2当作当前元素，那么，它前面有left1生成的浮动框，所以，它会贴着left1的右 margin 边排列。而到left3 的时候，剩余的空间已经不能够放置它了，所以，折行放置。

4. 左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。

注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。

HTML code

<style type="text/css">
    .sub {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 10px;
    }
</style>
<div id="container" style="width:200px; overflow:hidden; border:1px solid red;">
    <div class="sub" style="float:left;">left</div>
    <div class="sub" style="float

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一

相关资料更多>

推荐阅读更多>