无法在响应式 css 中清除浮动

Question

我正在 css 中创建一组特定于移动屏幕的样式。

HTML

<div id="rowlinks">
   <div class="rlleft">
          <div class="rllefta"> 
            <a href=""></a>
            <a href=""></a>
         </div>

       <div class="rlleftb">
            <a href=""></a>
            <a href=""></a>
       </div>
 </div>

    <div class="rlright">
        <div class="rlrighta">
            <a href=""></a>
            <a href=""></a>
      </div>

       <div class="rlrightb">
            <a href=""></a>
            <a href=""></a>
       </div>

    </div>
    <div style="clear:both"></div>
</div>

CSS

#rowlinks{clear:both;padding:10px;background-color:whitesmoke;margin-top:10px;border:1px solid grey;border-style:outset}
#rowlinks a{color:black;text-decoration:none;font-size:16px}

 .rlleft{width:45%;float:left;}
   .rllefta{float:left;width:45%;padding:10px;}
   .rlleftb{float:right;width:45%;padding:10px;}

.rlright{width:45%;float:right;}
   .rlrighta{float:left;width:45%;padding:10px;}
   .rlrightb{float:right;width:45%;padding:10px;}

@media only screen and (max-width: 1024px) {

    #rowlinks{clear:both;width:95%;margin:0px auto;}
    #rowlinks div{clear:both;width:95%;margin:0px auto;border:1px solid maroon}
    #rowlinks a{clear:both;margin:0 auto;font-size:16px;;width:80%}

 }

现在我的问题是，

尽管所有 div 在桌面和更大屏幕上的水平布局都非常完美，但在我展示的移动布局上，我希望它对称地堆叠在另一个下方。我使用 clear:both 来清除浮点数。但是，它并没有清除浮动，也没有将一个浮动堆叠在另一个下方。

我做错了什么？

Answer 1

如果要删除 float: left，请添加 float: none。 Float: none 删除所有浮动。

无法在响应式 css 中清除浮动

Not able to clear floats in responsive css

html

css

layout

css-float

responsive-design