老师，设置了浮动的元素是不是全部都会在一行显示?

就算因为父元素宽度的问题被挤到了下一行，但是它实际上还是在第一行，我这样理解对吗？

唐小贱 2017-05-23

源自：CSS网页布局基础 3-2 圣杯布局案例

56

收起

3回答

Miss路 2017-05-24 11:09:17

margin-left可能的值以及意义：是相对于父元素的，有点难理解，但是要记住这个技巧。

提问者唐小贱 #1

left和right很明显被挤到了第二行，但是left用了margin-left:-100%之后并没有往左移动，而是到了它原本位置的正上方，这就是我不理解的地方，fight也是同理。

2017-05-24 11:18:00
Miss路回复提问者唐小贱 #2

被挤到第二行是因为middle设置了宽度为100%，所以后面的元素会被迫到达第二行，这时还设置了一个container父容器，给了相应的填充，这里的margin-left:-100%是相对于父容器来讲的，事实上是像做移动了一个父容器的宽度，那么此时就会移到父容器的最左边，但是看上去像是向上移动了。right也是同理，right是向左移动了它本身的宽度，也是相对于父容器移动的，所以就到了你看到了的位置，因为他们都是浮动的元素，是被挤到下面的，不是本身是两行的，只要往左移到一定的宽度，就会跑上去。希望能帮到你，祝学习愉快！

2017-05-24 13:56:32
weibo_飞来云去_0 回复 Miss路 #3

自己试验了代码，right的margin-left：-219px就上不去，设成宽度为220px也就是right预设的宽度就能上去，这个还是挺不好理解的

2017-07-28 00:47:19

点开查看后面1条评论

Miss路 2017-05-24 10:45:43

设置了浮动之后在容器宽度能够容纳的前提下是显示在一行的，但是超过容器的宽度之后可能会换行，这个是他的表现方式，不用纠结是实际显示在一行还是表现在一行。margin-left为负的时候会往左移动，和正数的时候相反。祝学习愉快！

提问者唐小贱 #1

但是圣杯布局哪里left是向上移动了啊

2017-05-24 10:47:37

OlafChou 2017-05-24 06:00:23

我不是老师，但是我认为这不对啊，应该算下一行

提问者唐小贱 #1

可圣杯布局那一节的margin-left:-100%怎么解释?

2017-05-24 09:31:00

相似问题

老师想请问下浮动和行内块元素的区别是不能控制左右和浮动不是文档流吗

不太理解清除浮动怎么会让父元素包住浮动元素的

老师浮动之后对前面元素无影响浮动至下一行左右边框顶端但为什么前面是行内元素会出现重叠呢

元素浮动后的属性问题

清除浮动指清除哪里的浮动

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

前端小白入门系列课程

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

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载