为什么只给red添加float的话,红色会覆盖蓝色

为什么只给red添加float的话,红色会覆盖蓝色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
.p{width:200px;
height:200px;
background:red;
float:left;}
.o{width:200px;
height:200px;
background:blue;
}
</style>
</head>
<body>
<div class="p">
</div>
<div class="o">
</div>
<!-- 此处代码 -->
</body>
</html>

红色脱离文档流后,不应该是蓝色顶上去覆盖住红色方块吗,为什么反而是红色方块覆盖著蓝色方块

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
宝慕林842399 2018-11-22 16:39:29

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来,类似于一个图层的概念

妮可妮可妮_ 2018-11-06 14:34:54

你好同学

你可以这样子理解,当红色设置了浮动,脱离了文档流,就浮在上面,当下面的内容顶上来,红色的内容是浮起来的,就会在蓝色的上面,

祝学习愉快!

  • 老师,那为什么上节课视频中文字不会处在图片的下方,而是在图片右侧显示?
    2018-11-22 16:28:31
  • 老师我懂了,浮动元素会脱离文档流,但不会脱离文本流。
    2018-11-22 19:39:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师