脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

float时:

<html>
    <head>
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0}
            .box1{background-color:red;float:left;width:100px;}    
            .box2{background-color:gray;float:right;width:100px;}    
            .box3{background-color: aqua;margin: 0 110;}        
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </body>
</html>

显示效果如下:可见,box3的margin是box3边框到浏览器的距离,box2的位置并没有收到float的box1 box2的影响。

当把box3样式改为:.box3{background-color: aqua;}时,可以看到box3中间的文本依然为box1 box2让出了位置。 

position:absolute时:

<html>
	<head>
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0}
			.box1{width:100px;background-color:red;position:absolute;left:0;top:0}	
			.box2{width:100px;background-color:gray;position:absolute;right:0;top:0}	
			.box3{background-color: aqua;}		
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</body>
</html>

显示效果:

可以看到,box3中的文本不见了,被box1遮盖了,也可以反映出,box3的定位也是不受到绝对定位的box1 box2的影响,而且box3的文字也没有为box1 box2让出位置。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西枫里博客

CSS中img图片下方出现空白边距的解决办法

偶然发现在排版...

751
来自专栏HTML5学堂

CSS 1.0~3.0选择器(上)

HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将C...

2855
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1461
来自专栏卡少编程之旅

css黑魔法简略版

30711
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1124
来自专栏青玉伏案

IOS开发之绝对布局和相对布局(屏幕适配)

之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对...

3096
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1908
来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

1334
来自专栏ppjun专栏

Android十八章:帧动画

下面我们来说什么是帧动画。小时候有一种书的右下角把每一个动作画好,再快速的翻看,就可以看到一连串的动画了,这就是帧动画。 帧动画只要几张图片就能加载出动画效果...

991
来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

3545

扫码关注云+社区

领取腾讯云代金券