Html 可以使用 CSS 清除绝对定位的元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12821182/
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
Clear absolutely positioned elements with CSS possible?
提问by Staffan Estberg
Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.
Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?
有没有办法用 CSS 清除绝对定位的元素？我正在创建一个页面，我需要将网站的每个部分（部分元素）绝对定位，并且我想应用一个页脚，其内容位于这些元素下方。
尝试相对定位页眉和页脚以查看是否会考虑总高度，但页脚仍然“被困”在节元素下方。有任何想法吗？
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
回答by Diodeus - James MacFarlane
Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.
绝对定位的元素不再是布局的一部分 - 父项不知道绝对定位的子元素有多大。您需要自己设置“内容”的高度以确保它不会与页脚重叠。
回答by Lex Semenenko
Don't use absolutely-positioned elements for layouts since that elements are removed from normal flow and no longer affect elements around them. And they're not affected by other elements.
不要在布局中使用绝对定位的元素，因为这些元素会从正常流中移除并且不再影响它们周围的元素。而且它们不受其他元素的影响。
Use absolute-positioning to move elements within a container when conditions allow.
当条件允许时，使用绝对定位来移动容器内的元素。
For floated elements I suggest you to use a specific clearing technique called clearfix. I use it religiously.
对于浮动元素，我建议您使用称为 clearfix 的特定清除技术。我虔诚地使用它。
http://nicolasgallagher.com/micro-clearfix-hack/
http://nicolasgallagher.com/micro-clearfix-hack/
回答by o roodie
Had same question, made all absolute positioned, but let the first one be relative, as for responsive layout where height does change, it did help to keep track of the elements height changes, notice in this case all elements have same height:
有同样的问题，让所有的绝对定位，但让第一个是相对的，至于高度变化的响应式布局，它确实有助于跟踪元素高度的变化，注意在这种情况下所有元素都具有相同的高度：
.gallery3D-item {
position: absolute;
top: 0;
left: 0;
}
.gallery3D-item:first-of-type {
position: relative;
display: inline-block;
}回答by cjohansson
I discovered a easy solution to this, it might not cover all possible problems but at least it solved my problem.
我发现了一个简单的解决方案来此，它可能无法涵盖所有可能出现的问题，但至少它解决了我的问题。
HTML:
HTML：
<p>Content before</p>
<div class="offset-wrapper">
<div class="regular">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
<div class="special">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
</div>
<p>Content after</p>
CSS:
CSS：
.offset-wrapper {
background: green;
position: relative;
width: 100px;
}
.offset-wrapper .regular {
visibility: hidden;
}
.offset-wrapper .special {
bottom: -15px;
left: -15px;
position: absolute;
}
