关于float是否脱离标准文档流详细解析

最新推荐文章于 2020-12-05 03:52:51 发布
最新推荐文章于 2020-12-05 03:52:51 发布
阅读量1k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43264399/article/details/87008148
版权

关于float是否脱离标准文档流详细解析

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的

元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。
在这里插入图片描述
即其他元素会在其身下布局，文本会在其身后布局（保留文档中的占位）

与position比较
relative保留文档流中的占位
absolute不保留文档流中的占位

way-up
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浮动布局【CSS】
wuxian_wj的博客
12-22 1251
1. 什么是浮动 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 1.1 特征 1.1.1 脱离文档流 脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。 从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元
【关于HTML文档标准流和css浮动的详细讲解】
muweichang的博客
05-02 900
什么是浮动标准文档流三微观现象三元素等级浮动认识浮动三级目录 标准文档流 在这里先说一下什么是标准文档流。 标准文档流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。及标签默认的排版方式 标准文档流：指的是元素排版布局过程中，标签的一个“默认”状态。元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 标准文档流的特点：三微观现象、三元素等级 三微观现象 空白折叠现象：无论写多少个空格（或者换行），
深入解析 float
weixin_33994429的博客
07-22 240
0.前言 float属性在css2中是一个热门的属性，被广泛应用于布局之中，同时由于不当使用float带来的问题也非常多，本文结合自己对float的理解以及实际项目中碰到float的相关问题，做一个详细总结，欢迎一起探讨，但未经同意禁止转载。以下是文章的目录 float的特性 float与absolute的区别 float与inline...
float探索，脱离文档流？不脱离文档流？
banana960531的博客
01-10 1950
float属性是css2中的一个属性，很多时候我们都会用到她，但是通常只要一不小心就会遇到很多问题，跟设想的完全不一样呀，怎么回事？？？那么这个时候我们应该冷静下来好好探索一下这个属性的用法，弄明白其原理，适用于什么场景，这样在任何情况下都能正确的使用她。 最初，float是应用于图像，使文字环绕在其周围，使用float的元素会自动生成bense块级框，而不管其本身是什么元素。 下图中img浮...
float现象（是什么,脱标,排序,贴靠,字围,高度问题）
qq_37805832的博客
10-31 3482
float特点: 1:浮动的元素能让行内元素设置宽高. 2:记住,浮动的元素能使用内外边距. 3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高. 4:浮动元素是一种水平排版的东西. 5:浮动跟行内块级元素很像. 6:float只能水平排版. 缺点: 1:浮动中没有居中对齐,没有.只有左对齐 右对齐. 2:但是不能使用margin: 0 auto;使用这样无效. 什么是水平排版? 行内元素/行内块级元素 什么是垂直排版? 块级元素
css float 解析学习
09-25
CSS Float 是一种布局技术，用于指定元素在页面上的位置方式，使其可以从正常文档流中脱离，并允许其他元素环绕它。这个属性最初设计用于处理图像与文本的布局，但后来被广泛应用于创建复杂的网页设计。`float` 属性...
CSS 2.1（中英文）官方文档
05-15
- `float`属性使元素脱离正常文档流并浮动到一侧，其他元素会围绕它排列。 - 清除(`clear`)属性用于阻止元素与浮动元素相邻接，如`clear:both`防止元素上边和下边有浮动元素。 5. **长度单位与颜色** - 长度单位...
css文档
03-01
浮动元素可以使其脱离正常文档流，而定位则允许元素相对于其父元素或视口进行绝对定位。 颜色和字体是CSS2.0中两个重要的视觉元素。颜色可以通过颜色名称、十六进制、RGB、RGBA等方式表示，而字体则涉及字体家族、...
CSS的position属性完全解析
09-24
绝对定位（absolute positioning）则使元素完全脱离文档流，根据最近的已定位祖先元素进行定位。 `position`属性的可取值包括`static`、`relative`、`absolute`、`fixed`以及`inherit`。默认值是`static`，这意味着...
css2.0帮助文档
06-22
浮动（`float`）属性用于创建流式布局，元素会脱离正常文档流并向左或向右移动，直到其边缘接触到包含框或另一个浮动元素的边缘。清除（`clear`）属性用于控制元素是否可以跨越浮动元素，如`clear:both`防止元素被...
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
热门推荐
Paranoidyang的博客
03-14 2万+
所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。浮动脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 我们先利用下面代码在普通流中
css float和absolute脱离文档流的问题
wangshang1320的博客
02-28 1734
CSS中的布局默认是从上到下（块元素），从左到右（行内元素），有时候就需要左右排列 float 让元素浮动，以前用的比较多，在css3没出来之前这个挺好用的。让当前元素浮动，实现左右布局，部分脱离文档流，父元素高度塌陷等，给元素设置了float属性后其紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围 float：letf|right...
8.脱离标准文档流（浮动/固定定位/绝对定位）
前端学习笔记
04-08 2258
盒子居中：margin:0 auto;浮动元素脱离了标准文档流d1盒子脱离了标准文档流，d2盒子因此成为了标准文档流第一个，位于页面左上方，d1盒子浮动在d2上 .d1{ float:red; background-color:red; width:100px; height:100px; } .d2{ background-color:blue; widht:200px; heig...
标准文档流及脱离标准文档流的方法和float浮动用法
weixin_30924239的博客
09-16 563
1.标准文档流 浏览器的排版是根据元素的特征（块和行级），从上往下，从左往右排版。这就是标准文档流。 　　浮动 float:left/right; 　　效果:元素都加浮动，后面的元素会紧跟这前面的元素并排排列。 　　A,只要加了float，这个元素就会脱离标准文档流。 　　　　第一个加了float，离了标准文档流，对于浏览器来说，第二个元素就变成了标准文档流中的第一个，于是就会把他...
浮动，脱离标准流
weixin_37630796的博客
03-10 768
所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。一、浮动脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 二、绝对定位脱离文档流将f...
CSS——脱离标准流方法一：浮动
sleepwalker_1992的专栏
05-08 2464
浮动是css里面布局用的最多的属性。浮动语句：float:left;  左浮动float:right;  右浮动1、没有浮动的时候2、两个盒子都左浮动浮动的元素脱标，那么就能并排了，并且能够设置宽高了。一个span标签如果浮动，不需要转成块级元素，就能设置宽度、高度。浮动的所有标签已经不区分行内、块了。浮动的元素互相贴靠。3、两个盒子都右浮动4、浮动的元素有“字围”效果 <div>盒子...
解疑答惑—解决脱离标准文档流（恶心的浮动）
daruan0435的博客
10-08 958
在标准文档流中要并排显示内容但是会出现有的块级标签脱离标准文档流的现象，为了解决这种现象我们有三种方法1、浮动 2、绝对定位 3、固定定位 浮动的方法解决脱表的问题真的是让人哑巴吃黄连有苦难言，这个浮动整整让我迷惑了一个礼拜，最终发现还有比这个方法好很多的一个方法就是绝对定位，非常好理解，而且用起来还非常的方便。 那么这里我先说一下清除浮动的方法有三种方法：1给父盒子设置宽高（一般不...
relative会脱离文档流吗_如何脱离标准文档流之浮动
weixin_32771907的博客
12-05 705
标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。使元素脱离标准文档流的方法之一就是浮动，浮动也是css布局用的最多的属性。1. 浮动的基本语法基本语法：浮动写法示例：网页效果(未加float:left前)加上float之后由上面的例子可知，两个盒子同时往左浮动，脱离了标准文档流，就可以并排布局了。2. 浮动的性质1)浮动的元素脱标一个元素一旦脱离标准文档流，它原来所在标准文档流中的位...
关于css脱离标准文档流的两种方式
tongxinmiao的专栏
09-09 1万+
所谓脱离标准文档流就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 第一种方式：浮动（float）:不浮动的盒子会无视浮动的盒子，假使现有两个盒子，一个浮动一个不浮动，则浮动的盒子会覆盖不浮动的盒子。如下代码的结果所示： 浮动 body{ margin:0px; } .first { background-colo
css脱离文档流方式
最新发布
07-27
CSS中有多种方式可以使元素脱离文档流。其中包括浮动（float）、绝对定位（absolute）和固定定位（fixed）等方式。当给一个元素添加了浮动属性（float），它将脱离文档流并不再占有原来的位置。绝对定位（absolute）和固定定位（fixed）也可以使元素脱离文档流，但是它们的定位方式不同。绝对定位的元素会相对于其最近的已定位祖先元素进行定位，而固定定位的元素则会相对于浏览器窗口进行定位。其他定位方式（static和relative）不会使元素脱离文档流，它们仍然会占有原来的位置。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [CSS标准文档流和脱离文档流](https://blog.csdn.net/qq_43742385/article/details/109366526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值