浮动覆盖与文字围绕浮动解析

最近一直纠结于浮动和非浮动元素相邻时候的奇怪表现，按照我的理解，浮动元素浮动后就脱离了普通文档流，相邻的非浮动元素就会忽略浮动元素本来应该占有的那部分空间。

按照我之前的理解，那么我认为如果一个元素A浮动了，那么相邻的非浮动元素B一定会被A覆盖在下面了，但是实际情况中我有两个现象不解

【现象1】

为什么在IE6下面，浮动元素不能覆盖在相邻的非浮动元素之上，而是和相邻的非浮动元素一起左右排列？

【现象2】

官方说法是浮动元素会缩短行框

通俗说就是，为什么在IE8 firefox chrome safari下，浮动元素覆盖着相邻的非浮动元素，但是非浮动元素包含的文字却不被覆盖而是围绕着浮动元素？并且如果非浮动元素的垂直高度上超过了浮动元素高度后的文字又从容器最左侧出现了而不是围绕着浮动元素了，这到底是为什么呢？

下面先分析现象1

先上代码

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title>浮动与hasLayout研究 文字围绕</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
        }
        .Box{
            width:300px;
            overflow:auto;
        }
        .leftBox{
            background:#CCC;
            width:100px;
            height:30px;
            float:left;
            *margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/
        }
        .textBox{
            width:200px;
            background:#FFCCCC;
        }
    </style>
</head>
<body>
<div class="Box">
    <div class="leftBox">浮动元素</div>
    <p class="textBox">文本文本文本文本文本文本文本文本文本文本文本文本文文本
        文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文
        本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>
</body>
</html>

分别打开IE和chrome查看效果后，我们可以看到区别：IE下非浮动元素不会被浮动元素覆盖，而chrome等主流浏览器表现正常，即非浮动元素被浮动元素覆盖

下面解释下为什么IE下非浮动元素不会被浮动元素覆盖？

大家看看我上面的CSS部分

.textBox{width:200px;background:#FFCCCC;}

这里我给非浮动元素textBox定义了固定的宽高，这一行为触发了元素在IE下特有的hasLayout（拥有布局）属性，也就是说让textBox元素拥有了布局

说通俗一点，IE下当元素没有拥有布局的情况下，它的表现和其他浏览器是一致的，之所以看到的表现不同了，那是因为该元素被触发了hasLayout属性

【注意】

在IE678下80%以上的怪异表现和BUG均是它引起的，关于hasLayout我在后面文章里具体研究下hasLayout （拥有布局）属性介绍，以及其触发条件

关于上面第一点的表现，就是因为three定义了固定宽高，而这个CSS设置会触发它的hasLayout，而当元素拥有布局后，在IE下它不再忽略浮动元素应该占有的空间，所以它不会被覆盖，而是排列在浮动元素的右侧

【解决方案】

如何让上面的代码表现的和IE8等浏览器一样呢？

很简单，解除非浮动元素的布局，也就是不要触发它的hasLayout，是什么引起的我们就删除什么，把

width:200px;

删除，我们就可以看到所有浏览器都一致的表现，那就是非浮动元素被浮动元素覆盖在下面

【注意】

IE6下很多BUG都是可以通过触发元素的hasLayout来解决的，但是也有需要避免触发的时候，这个例子就是需要避免触发hasLayout

现象二：

为什么在IE8等浏览器下，虽然非浮动元素按照我们的理解，它是被浮动元素覆盖了，但是它包含的文字为什么不会被覆盖，而是围绕浮动元素呢？

按照我们之前的理解，元素浮动后，非浮动元素会忽略浮动元素本应该占有的空间，所以我们肯定费解为什么文字不被覆盖，文字围绕浮动元素，好像还给浮动元素留了空间，并没有忽略啊，这怎么回事？

从看书到实际操作终于明白了原因：

浮动元素所说的不占据空间，指的是不占据块级文档空间，但是会占据行框空间。

关于行框空间与块空间（文档空间），我的理解如下：

（1）行框空间

一个行框自身的宽度是由其包含的行内框的尺寸决定的，而行内框的尺寸无疑就是因为其包含的文字等决定的。行框最大的宽是父容器的宽度。

比如上面代码中的P元素，它是个块元素，它如果没有被定义固定宽度，默认宽度应该是100%，也就是父容器的宽度。如果我们删除上面代码

.textBox{  
    width:200px;  
    background:#FFCCCC;  
}

里面的固定宽度 width:200px; 这时候浮动元素不会占据块的空间，所以P元素就是100%的父容器宽度 300px，但是浮动元素会占据另外的空间，这就是我现在说的行框空间

（2）文档空间

经过上面的解释，我相信第二种空间也不需要再多解释什么了，上面说的块空间，其实就是文档空间。

浮动元素浮动后脱离文档流，不占据文档空间，所以它不会占据P元素的空间

相信到这里，大家都明白了为什么在IE8 firefox等浏览器下会有浮动覆盖非浮动，非浮动的文字环绕浮动元素这个现象了吧

浮动覆盖与文字围绕浮动解析

相关推荐