很不理解...

很不理解的是left,main,right是这三个变为float, 而inner是被main包裹的子元素, inner并没有浮动, 即使marginleft和right也只是针对main这个父容器啊. 那为什么left 用了marin-100%, 就能填充到inner和main之间的位置去了呢?

我在网上查了margin-left:-100%这个100%是依据父元素的, left没有父元素,直接是body了,确实是能移动到上一行的main的左边,但是距离inner应该还是有inner的marginleft的200px的距离啊... 为什么就能填进去了, 实在想不通...

NeilSK 2018-01-17

源自：CSS网页布局基础 3-4 双飞翼布局及案例

41

收起

3回答

好帮手慕糖 2018-01-18 09:36:11

你好，main区域，就包裹了一个远，且包含该元素的内外边距，你可以F12然后查看下，main区域。

这里main的最左侧，与innermain的左外边距是同一个地方，可认真查看下。

祝学习愉快~

好帮手慕糖 2018-01-18 09:25:36

你好，可以这么理解，红色方块margin-left:100%的话应该出现在整个main的最左边，这里可以测试下哦来理解。

祝学习愉快~

提问者 NeilSK #1

好像并不是在整个main的最左边,而是只在绿色innermain的左边,覆盖了innermain左边的白色区域, 是这样吗?

2018-01-18 09:27:31

好帮手慕糖 2018-01-17 18:42:38

你好，1、inner（绿色）是被main包裹的子元素, marginleft和marginright也只是针对main这个父容器啊，这个是没有你好，所以左右分别会有200px，220px的空白。main的宽度又为100%，即：如下图这种情况：

2、正常情况下，三个元素浮动，应该水平在一行的，但是这个由于第一个元素的宽度是100%，所以把其他两个元素给挤下去了，这时候，给.sub元素（红色的）设置margin-left: -100%;然后就是你说的把.sub移到了最左边。

祝学习愉快~

提问者 NeilSK #1

其实我的意思是我觉得红色方块marginleft－100%的话应该出现在整个main的最左边，也就是绿色方块左边marginleft200px的白色区域的左边

2018-01-17 19:19:46
提问者 NeilSK #2

但其实红色方块加上margin-left:-100%属性后, 好像脱离了float后的文档流, 和左边白色区域重合并且覆盖了 , 可以这么理解吗?

2018-01-17 19:50:05

相似问题

为什么这么写不是很理解

这段代码不是很理解

两处不是很理解

这行代码不理解

不是很理解。。

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载