CSS clear 不适用于媒体查询

Question

iv 在宽度 25% 处获得 4 个 div，div 1 text div 2 image，diz 3 text div 4 image @ media 480 我想排，但 div 3 卡住了，我有 3 行 :( 认为你明白我的意思哈哈。我在 2 div 上都明确表示，是的，它可以工作，但在媒体 768 上它应该在 1 行但知道它仍然在 2 行但在屏幕上，所以我没有明确表示，然后它会又不行了

<div id="box1" class="column1 four">
        <h3>BOX 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    </div>
    <div id="box2" class="column1 four">
        <h3>BOX 2</h3>
        <img src="img/box2.jpg">

    </div><div class="clear"></div>
    <div id="box3" class="column1 four">
        <h3>BOX 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
    </div>
    <div id="box4" class="column1 four">
        <h3>BOX 4</h3>
        <img src="img/box4.png">

</div>

CSS

@media only screen and (min-width: 480px) {
 .clear {clear: both}

}

@media only screen and (min-width: 768px) {

} .clear {清除：无；}

Answer 1

了解如何编写和使用CSS media queries

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

所以在你的情况下应该是

@media only screen and (min-width: 480px){
 .clear {clear: both}
}

@media only screen and (min-width: 768px) {
 .clear {clear: none;}
}