你如何围绕浮动元素进行div包装？

Question

我想要什么

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

Answer 1

有一个CSS hack用于清除所有内部浮动。 添加类＆＃34; clearfix＆＃34;你的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＆＃39; mobileNavBar＆＃39;创建样式。同样，但最好创建一个可重用的类。

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

Answer 2

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

.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 到网格进行此类布局。

Answer 3

花车可能很棘手。你能用flexbox吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="guestWrap"> <div class="formField guestName" id="guestName"> <label class="label">What is your guest's name?</label> <input type="text" class="input" name="guest1" id="guest1"> </div> </div> <div id="addGuest"> <span class="guestIncrease">Add another guest</span> </div>会使这更简单：）

的CSS：

display:flex

HTML：

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

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