CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

最新推荐文章于 2025-03-19 00:30:00 发布

du_xian_sheng

最新推荐文章于 2025-03-19 00:30:00 发布

阅读量710

点赞数 1

分类专栏： html5+css3

html5+css3 专栏收录该内容

9 篇文章

订阅专栏

本文解析了CSS中浮动(float)及绝对定位(position: absolute)使元素脱离文档流的特性，并对比了两者之间的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。

一、浮动脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
我们先利用下面代码在普通流中看一下效果，方便对比：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #outofnormal {
       width: 200px;
       background-color: cyan;
       padding: 10px;
    }
    h2 ,p{
    border:1px solid #000;
    }
</style>
</head>
<body>
    <div id="outofnormal">
        Out of normal: 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet 
        corporis,veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?
    </div>
    <h2>Normal Content</h2>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis 
       laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto 
     velit eligendi id!
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio a
       t unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.
    </p>
</body>
</html>

在普通流的效果如下：
这里写图片描述

然后给蓝色的盒子outofnormal加上左浮动：

#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
    float: left;
}

显示结果如下：

这里写图片描述

浮动之后，蓝色的div就脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本，却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。

二、绝对定位脱离文档流

将float: left;改为position:absolute

#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
    position:absolute;
}

显示结果如下：

这里写图片描述

看到这里，有发现与浮动脱离文档流的不同之处吗？相信聪明的你已经发现了，设置了绝对定位后，不仅是旁边的其他盒子无视蓝色div的存在，连盒子里的文本也无视了蓝色div的存在，顶着左上边框定位！

三、总结

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

参考链接：http://www.zhihu.com/question/24529373/answer/29135021