Question

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

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

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

例如，在此网址中，我无法在form.woocommerce-ordering之后将其用于清算：http://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;
    }
}

因此div.yit-wcan-container的保证金最高限度没有生效。有什么想法吗？

非常感谢！

Answer 1

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

您必须在2个浮动元素周围包裹div或其他块元素，然后对其应用clearfix样式。除非你想指定固定的保证金或我认为没人会推荐的保证金，否则没有别的办法。

div：清除方法不起作用

1 个答案: