如何让 div 环绕浮动元素？答案

【问题标题】：How do you make a div wrap around floating elements?如何让 div 环绕浮动元素？
【发布时间】：2018-04-27 02:43:13
【问题描述】：

我想要什么

我正在尝试为移动网站创建导航栏。我想要一个深蓝色的导航 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？

【问题讨论】：

标签： html css

【解决方案1】：

有一个用于清除所有内部浮动的 CSS hack。将类“clearfix”添加到您的 div：

<div id="mobileNavBar" class="clearfix">

  <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>

CSS 代码：

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

因此，这将清除现有 div 中的所有浮点数。您也可以使用 div id 'mobileNavBar' 创建样式，但最好创建一个可重用的类。

请查看https://www.w3schools.com/howto/howto_css_clearfix.asp 以获得更清晰的信息。

【讨论】：

非常感谢您的帮助，更重要的是链接，阅读此内容有助于我更好地理解“为什么？”这将在未来的情况下有用！

【解决方案2】：

浮动可能很棘手。你能用flexbox吗？

display:flex 会让这更简单:)

css:

#mobileNavBar {
    background-color: #4d94ff;
    border: 1px solid #4d94ff;
    display: flex;
}

html:

<div id="mobileNavBar">
    <div style="width:20%;">
        <span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x">first div</i></span>
    </div>
    <div style="width:80%">
        second div
    </div>
</div>

* 未显示轮廓和填充的标记

【讨论】：

【解决方案3】：

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

.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 到 grid 进行这种布局。

【讨论】：