CSS 如何从流中删除元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2993851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove an element from the flow?
提问by Devoted
I know position: absolutewill pop an element from the flow and it stops interacting with its neighbors.
我知道position: absolute会从流中弹出一个元素，它会停止与其邻居交互。
What other ways are there to achieve this?
还有什么其他方法可以实现这一目标？
采纳答案by Matchu
None?
没有任何？
I mean, other than removing it from the layout entirely with display: none, I'm pretty sure that's it.
我的意思是，除了使用 将其从布局中完全删除之外display: none，我很确定就是这样。
Are you facing a particular situation in which position: absoluteis not a viable solution?
您是否面临着position: absolute不可行的解决方案的特定情况？
回答by Joe Flynn
回答by user
Another option is to set height: 0; overflow: visible;to an element, though it won't be really outside the flow and therefore may break margin collapsing.
另一种选择是设置height: 0; overflow: visible;为一个元素，尽管它不会真正在流程之外，因此可能会破坏margin collapsing。
回答by Greg Hewgill
There's display: none, but I think that might be a bit more than what you're looking for.
有display: none，但我认为这可能比您正在寻找的要多一些。
回答by Sam Bowler
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
浮动它会重新组织流程，但 position: absolute 是将其从文档流程中完全移除的唯一方法。
回答by Brian Lewis
position: fixed;will also "pop" an element out of the flow, as you say. :)
position: fixed;正如您所说，还将从流程中“弹出”一个元素。:)
position: absolutemust be accompanied by a position. e.g. top: 1rem; left: 1rem
position: absolute必须有一个职位。例如top: 1rem; left: 1rem
position: fixedhowever, will place the element where it would normally appear according to the document flow, but prevent it from moving after that. It also effectively set's the height to 0px (with regards to the dom) so that the next element shifts up over it.
position: fixed但是，将根据文档流将元素放置在它通常出现的位置，但在此之后阻止它移动。它还有效地将高度设置为 0px（关于 dom），以便下一个元素向上移动。
This can be pretty cool, because you can set position: fixed; z-index: 1(or whatever z-index you need) so that it "pops" over the next element.
这可能非常酷，因为您可以设置position: fixed; z-index: 1（或您需要的任何 z-index）以便它“弹出”下一个元素。
This is especially useful for fixed position headers that stay at the top when you scroll, for example.
例如，这对于滚动时保持在顶部的固定位置标题特别有用。
回答by Jeremy Miller
I know this question is several years old, but what I think you're trying to do is get it so where a large element, like an image doesn't interfere with the height of a div?
我知道这个问题已经有好几年了，但我认为您想要做的是得到它，以便像图像这样的大元素不会干扰 div 的高度？
I just ran into something similar, where I wanted an image to overflow a div, but I wanted it to be at the end of a string of text, so I didn't know where it would end up being.
我刚刚遇到了类似的问题，我希望图像溢出一个 div，但我希望它位于一串文本的末尾，所以我不知道它最终会在哪里。
A solution I figured out was to put the margin-bottom: -element's height, so if the image is 20px hight,
我想出的一个解决方案是把 margin-bottom: -element 的高度，所以如果图像是 20px 高，
margin-bottom: -20px;
vertical-align: top;
margin-bottom: -20px;
vertical-align: top;
for example.
例如。
That way it floated over the outside of the div, and stayed next to the last word in the string.
这样它就会漂浮在 div 的外部，并停留在字符串中的最后一个单词旁边。
回答by air5
For the sake of completeness:
The floatproperty removes a element from the flow of the HTML too, e.g.
为了完整起见：该float属性也从 HTML 流中删除了一个元素，例如
float: right
回答by Massimo
Try to use this:
尝试使用这个：
position: relative;
clear: both;
I use it when I can't use absolute position, for example in printing when you use page-break-after: always;works fine only with position:relative.
当我不能使用绝对位置时，我会使用它，例如在打印时，当你page-break-after: always;只使用position:relative.
