如何避免div重叠？浮动布局场景下的解决方法

你遇到的问题本质是浮动元素脱离了正常文档流，非浮动的div three会按照正常流位置布局，所以和前两个浮动div重叠。下面是几种实用的解决办法：

方法一：给非浮动元素添加clear属性 #

直接给div three设置clear: both;，这个属性会让元素忽略左右两侧的浮动，自动排在所有浮动元素的下方，彻底避免重叠。

示例代码：

.one {
  float: left;
}
.two {
  float: right;
}
.three {
  clear: both; /* 关键代码 */
}

方法二：给父容器创建BFC（块级格式化上下文） #

给包含这三个div的父容器添加BFC触发属性，让父容器包裹住内部的浮动元素，这样后续元素就不会跑到浮动元素的位置里。常用的无副作用方法是display: flow-root;，也可以用overflow: hidden;（注意如果父容器内有超出内容会被裁剪）。

示例代码：

.parent-box {
  display: flow-root; /* 触发BFC，包裹浮动元素 */
}
.one {
  float: left;
}
.two {
  float: right;
}
/* div three 无需额外设置 */

方法三：用现代布局替代浮动 #

如果不需要兼容老旧浏览器，推荐用Flexbox布局彻底替换浮动，这样更简洁也不会有浮动相关的问题。给父容器设置display: flex;和justify-content: space-between;，就能让前两个div分别靠左、靠右排列，第三个div自然排在下方。

示例代码：

.parent-box {
  display: flex;
  justify-content: space-between;
}
/* 移除.one和.two的float属性 */
.three {
  /* 无需额外设置，自动排在下方 */
}

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