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

编程之家收集整理的这篇文章主要介绍了CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、浮动脱离文档流

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

<!doctype html>
<html>
<head>
<Meta charset="utf-8">
<title>标题文档</title>
<style>
#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
}
</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 at 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

总结

以上是编程之家为你收集整理的CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别全部内容,希望文章能够帮你解决CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的HTML相关文章

Mip是什么意思以及作用有哪些
MIP安装的具体步骤有哪些
怎么使用MIP组件
Mip的内联框架组件是什么
Mip轮播图组件中的重要属性讲解
HTML添加超链接、锚点的方法及作用详解(附视频)
怎么创建初始的MIP配置及模板文件
jQuery表单验证提交:前台验证一(图文+视频)
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注