如何使div包裹浮动元素？移动端导航栏布局异常求助

嘿，我来帮你搞定这个导航栏的问题！你遇到的情况是典型的浮动元素导致父容器高度塌陷——因为你给内部的两个div加了float:left和float:right，浮动元素会脱离正常的文档流，父容器#mobileNavBar没有被内部元素撑起高度，所以就变成了一条细线，而浮动的子元素自然就“跑”到父容器外面去了。

下面给你两种实用的解决方案，你可以根据需求选择：

方案一：清除浮动（修复现有浮动布局） #

给父容器添加清除浮动的样式，最常用的是伪元素方法（不会影响其他元素，兼容性好）：

首先给#mobileNavBar添加CSS样式，同时补上你需要的深蓝色背景：

#mobileNavBar {
  background-color: #0d47a1; /* 深蓝色示例色，可按需调整 */
  padding: 8px 16px; /* 加内边距让内容不贴边 */
}

/* 伪元素清除浮动 */
#mobileNavBar::after {
  content: "";
  display: table;
  clear: both;
}

补全你截断的HTML代码（注意widt...应该是width:80%吧？）：

<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%">
    <!-- 这里放置你的搜索表单内容 -->
  </div>
</div>

方案二：用Flexbox布局替代浮动（更推荐移动端） #

浮动是比较老旧的布局方式，移动端更适合用Flexbox——它天生不会有塌陷问题，还能更灵活地控制元素对齐：

修改#mobileNavBar的CSS：

#mobileNavBar {
  background-color: #0d47a1; /* 深蓝色 */
  display: flex;
  align-items: center; /* 让内部元素垂直居中 */
  justify-content: space-between; /* 让两个子元素分别靠左右排列 */
  padding: 8px 16px;
}

然后去掉子元素的float属性，按需调整宽度即可：

<div id="mobileNavBar">
  <div>
    <span class="menu-trigger"><i class="fas fa-bars menuFA fa-2x"></i></span>
  </div>
  <div style="width:80%">
    <!-- 搜索表单内容 -->
  </div>
</div>

Flexbox会自动让父容器被内容撑起高度，同时完美实现你要的左右布局效果。

内容的提问来源于stack exchange，提问作者Ruke