html - 如何让 div 环绕浮动元素？

问题描述

我想要的是

我正在尝试为移动网站创建导航栏。我想要一个深蓝色的导航 div 来容纳一个菜单按钮和一个搜索表单。

我得到了什么

我的包装器 div 仅显示为一条深蓝色细线，其中的导航 div 仅存在于包装器之外。

编码

<div id="mobileNavBar">

    <div style="float:left;width:20%">
        <span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i> 
        </span>
    </div>

    <div style="float:right;width:80%"> 
        <?php get_search_form(); ?>
    </div>
<div style="clear:both"></div>
</div>

这是导航 div 的 CSS

#mobileNavBar{
        background-color: #4d94ff; 
        border:1px solid #4d94ff;
        height:auto;
    }

图片

下面是我的移动网站的图片，忽略大黑框，这只是我隐藏的内容。那里实际上有一个标志和书面内容。

如您所见，我的导航 div 是一条深蓝色细线，导航内容位于下方。

我试过的

好吧，在查看了这个网站上的类似问题之后，我被引导相信问题在于我的元素是浮动的，因此我需要添加：

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

不过，这似乎没有影响。

如何让导航 div 将自身包裹在菜单和搜索栏的图像周围？或者更确切地说，如何让 div 环绕浮动 div？

标签： htmlcss

将以下类应用于浮动元素父级。

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

或者您可以在 HTML 中添加额外的元素

<div> 
  <div style="float: left;">Sidebar</div> 
 <div style="float: right;">Content</div> 
  <div style="clear: both;"></div><!-- Clear the float -->
 </div>

上述解决方案解决了您的问题，但我认为您可以使用flex to grid进行这种布局。

html - 如何让 div 环绕浮动元素？

问题描述

解决方案

推荐阅读