为了账号安全,请及时绑定邮箱和手机立即绑定

求大神?第二个p标签的内容为什么不被两个浮动的div覆盖住部分内容

两个div浮动起来,脱离文档流,第二个p标签在文档流中,第二个p标签会上升到第一个p标签后,两个div跟在第一个处于文档流的p标签后,不应该覆盖住第二个p标签的左右部分内容吗?为什么p标签的内容被挤到了两个div的中间

感觉这部分很模糊,求大神给个系统逻辑的答案

正在回答

2 回答

虽然模块设置了浮动,但是他本身是没有脱离文档流的,你可以用两个模块测试一下,测试代码如下:

HTML部分:

<div class="mod1">我是模块1</div><div class="mod2">我是模块2</div>

CSS部分:

.mod1{width:100px;height:100px;float:left;border:2px solid black;}

.mod2{height:100px;border:2px solid pink;background-color:pink;)

在模块1中没有设置颜色,给模块2设置了颜色,在浏览器里面可以看见,模块2的颜色是占据整行的,但是模块2的内容却是在模块1后面,从结果里面可以看出,被设置了浮动的模块相当于浮动到了内容层,背景层已经不占据位置。。我是这样理解的,你也可以自己写代码来验证一下,这样应该会记得更牢固吧~~

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

DIV浮动也是占位置的

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

65284912 提问者

那为什么浮动的div可以压住下一个div呢? <style type="text/css"> .box1{height:50px; width:200px;background:#0F0;float:left} .box2{height:70px; width:100px;background:#F00} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
2016-05-16 回复 有任何疑惑可以回复我~
#2

温水里的小白 回复 65284912 提问者

是压住的,但是被压住的DIV内容是不会被压住的!
2016-05-21 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214705    人
  • 解答问题       1756    个

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

进入课程

求大神?第二个p标签的内容为什么不被两个浮动的div覆盖住部分内容

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信