是否可以使用伪元素使包含元素环绕绝对定位的元素（如clearfix）？
我正在为我的网站制作一个轻量级的响应式jQuery滑块，并使用了非常常见的标记：
HTML：
CSS：
#slider { width:80%; max-width:800px; margin:0 auto; } #slider ul { margin:0px; padding:0px; list-style:none; width:100%; } #slider ul li { width:100%; position:relative; } #slider img { width:100%; position:absolute; top:0px; box-shadow:0px 20px 40px rgba(0,0,0,.66); } #slider img.active { z-index:1; }
我遇到的问题是我的绝对定位幻灯片正在做他们应该做的事情并从页面结构中删除它们。 （这不是我希望他们做的，但它是堆叠它们的简单方法）。
我一直在阅读有关今天的CSS Pseudo-Elements以及人们正在使用它们的所有很酷的东西。 它让我想到……他们可以用来“清除”这些绝对定位的元素吗？ 我的想法是，可能有办法做以下事情：
#slider img:before { content:""; display:block; position:static; }
显然需要更多的样式来实现这一点（因为它不会渲染我想要的东西……我知道此时你可能会想到“为什么不指定容器的高度并完成用它？“嗯，幻灯片的响应意味着当它们收缩时，容器的高度也会缩小。
我真的想尽可能多地做这个，而不是诉诸jQuery来设置容器相对于图像高度的高度……这很诱人，但我认为有办法解决这个问题……
我在网上找不到任何关于如何做到这一点的事情（或者如果可能的话）。 一些CSS大师可以加强帮助我吗？ 我很乐意听到堆叠幻灯片的其他方法，或者（主要）是否可以使用伪元素来保留容器高度围绕我绝对定位的图像…
更新： jsFiddle： http ： //jsfiddle.net/derekmx271/Hu6Yf/
更新：接近解决方案（只需要锁定与幻灯片相同的尺寸）:) http://jsfiddle.net/derekmx271/T7A7M/
有许多不同的方法来实现滑块/轮播系统（术语或标记，JavaScript和CSS），如果你发现一种方法不太有用，重新思考方法通常是一个好主意。 据我所知，你要问的是:before和:after不会工作，因为一旦元素被绝对定位，它就会停止听取任何其他元素的影响（在某些情况下保存 – 它是位置父级）。
出于上述原因，我一直希望有一种新的显示模式，例如display: stack或其他东西..但是，唉，还没有:)
要求
如果我理解正确，你想要的是你的“容器”假定你的UL中最大图像的大小，但你希望这些项目叠加在一起。 就我的CSS知识而言，其中一个必须改变，因为你不能同时做到 – 除非你想试验flexbox可能提供的可能性？
问题
我知道（在flexbox之外）堆叠元素的唯一方法是使用position: absolute并且只要在元素上使用绝对定位，在计算父元素的尺寸时就不再考虑该元素。 您可以使用position: relative但这通常需要手动/代码干预来指定确切的位置。
可用选项
-
使用正负相对定位（或边距）保持元素定位 – 这会使您的JavaScript开发更加困难，但这意味着元素会在文档中保留其空间。
-
使用
display: table或float: left（有足够的容器宽度）将所有元素放到一个水平线上 – 这将保持你的高度但是意味着你限制你的转换可以是什么（除非你使用JavaScript来复制这行元素进入单独的层） 。 -
你的JS可以隐藏原始图像（使用
visibility: hidden因为这意味着元素仍占用空间），然后只使用克隆的绝对定位图像。 通过摆弄隐藏图像的css布局，您仍然可以保留这些“幻影”元素生成的最大高度。 -
在一天结束时，由于大多数轮播系统需要JavaScript才能工作，您可能只需在JS中定义容器的尺寸（如您所述）并完成它。 保持元素绝对定位将使您的编码工作更容易。
-
查看flexbox并查看它是否具有堆叠元素的能力。
-
可以使用CSS变换来堆叠元素，但是我对此的体验意味着你可能会得到你想要的东西，但是变换后的元素经常会在文档的其他地方占据“幻影”空间。
更新
关于使用:before content添加图像:before和:after您将无法控制尺寸。 您可以通过背景设置图像，这样可以缩放它们（使用background-size ），但是我不确定这会如何在构建旋转木马时让您的生活更轻松，因为您必须对这些图像进行硬编码进入CSS而不是使用标记的URL …
对于clearfix，请尝试此CSS：
#slider img:after { clear: both; } #slider img:before, #slider img:after { content: " "; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; }