0

我不知道为什么我不能在我的页面中使用清除浮动方法。如果我使用经典<div class="clearfix"></div>没有任何问题，但尝试使用更具语义的解决方案似乎不起作用。这是我的代码：

.clear:before, .clear:after {
content: " ";
display: table;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

例如，在这个 URL 中，我不能让它在之后清除：http form.woocommerce-ordering: //melopienso.com/testingtwo/shop/

两个浮动元素具有以下代码：

<p class="woocommerce-result-count">
Showing all 5 results</p>

<form class="woocommerce-ordering" method="get">
<select name="orderby" class="orderby" data-cip-id="cIPJQ342845639">
    <option value="menu_order" selected="selected">Default sorting</option><option value="popularity">Sort by popularity</option><option value="rating">Sort by average rating</option><option value="date">Sort by newness</option><option value="price">Sort by price: low to high</option><option value="price-desc">Sort by price: high to low</option> </select>
</form>

还有他们的 SCSS：

p.woocommerce-result-count { float: left !important; margin: 0 !important; }

form.woocommerce-ordering {
float: right !important;

    &:before {
    content: " ";
    display: table;
    }

    &:after {
    content: " ";
    display: table;
    clear: both;
    }
}

所以 margin-top ofdiv.yit-wcan-container没有生效。有任何想法吗？

非常感谢！

4

1 回答 1

2

::before并且::after不要在目标元素之前和之后创建伪元素，它们实际上在元素内的任何内容之前和之后创建元素。因此，您的所有 CSS 现在正在做的就是在已经浮动的表单元素中创建一些伪元素，因此它正确地对“外部”上下文没有影响。

您必须在 2 个浮动元素周围包裹一个 div 或其他块元素，然后对其应用 clearfix 样式。除非您想指定固定边距或类似我认为没有人会推荐的东西，否则没有其他方法可以解决这个问题。

于 2013-12-21T12:45:43.147 回答