设置了float浮动，元素到底在不在标准文档流中啊？

如题，在慕课网学了两节课，两个老师讲解的不一样，有的说脱离了标准文档流，有的说仍旧处于标准文档流

程序爱好者11

2015-07-07

源自：网页布局基础 3-1

关注问题我要回答

6901

操作

收起

9 回答

iters 回答被采纳 +3 积分
2015-11-26

元素脱离文档流，但是元素中的内容是在文档流中的。

没有float的情况：

添加了float：left后的情况

（1）元素在脱离文档流就是说，float使html元素脱离文档流浮动起来，导致其后面的（在文档流中的）元素占据了float元素的原位置。

（2）内容仍然在文档流就是说，虽然承载内容的元素脱离了文档流，但是其内部内容仍然在文档流中，后续的元素即使占据了我元素的位置，也要为了其中的内容留空间。

所以从图中可以看到，虽然橘色部分没有浮动之前的位置被后续元素占了，但是其内部内容仍然占据文档流中的空间。

9 回复有任何疑惑可以回复我~

For_Krishna
2017-04-23

我也不懂

0 回复有任何疑惑可以回复我~

劫火残灰
2016-10-08

好像是半脱离，盒子是进去了，可文字被挤出来了。

0 回复有任何疑惑可以回复我~

fan123fan
2016-08-29

半脱离文档流

0 回复有任何疑惑可以回复我~

Miracle_J
2016-07-23

你们都错了，没有完全脱离文档流，浮动起来的元素出于“半塌陷”状态

0 回复有任何疑惑可以回复我~

深山小童
2016-01-13

文字会围绕

0 回复有任何疑惑可以回复我~

Da嗒_Sunny
2015-08-31

老师这个地方讲错了设置float之后,会脱离文档流.

0 回复有任何疑惑可以回复我~

慕无忌5164682
2015-07-23

feel confused too

0 回复有任何疑惑可以回复我~

tel猪宝宝
2015-07-07

脱离文档流，自己写个实验下

0 回复有任何疑惑可以回复我~

#1

程序爱好者11 提问者

我试验了，空盒子会认为他脱离文档流，但是文字不会

2015-07-09 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

网页布局基础

参与学习 214704 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

设置了float浮动，元素到底在不在标准文档流中啊？

我要回答关注问题

意见反馈帮助中心 APP下载