如何在BFC中实现子元素水平排列？附布局需求与代码示例

问题背景 #

现有代码的布局中，left容器浮动导致right内的item被挤压，需要实现以下效果：

• right容器内的item水平排列
• left与right容器保持重叠
• right内元素不受left影响，可从左到右正常排列
• left内元素不受right影响，可正常从上到下排列

现有代码 #

HTML代码 #

<div className={styles['box']}>
  <div className={styles['left']}></div>
  <div className={styles['right']}>
    <div className={styles['item']}></div>
    <div className={styles['item']}></div>
    <div className={styles['item']}></div>
    <div className={styles['item']}></div>
  </div>
</div>

CSS代码 #

.box {
  background: lightblue;
  width: 600px;
  overflow: hidden;
}
.right {
  background: lightcoral;
  opacity: 0.5;
  border: 3px solid saddlebrown;
  width: 300px;
  min-height: 100px;
}
.left {
  background: lightseagreen;
  border: 3px solid saddlebrown;
  width: 200px;
  height: 200px;
  float: left;
}
.item{
  background: lightslategrey;
  width: 50px;
  height: 50px;
  margin: 10px;
}

当前布局效果 #

解决方案 #

通过绝对定位让两个容器脱离文档流实现重叠，用Flexbox实现item水平排列，修改后的CSS代码如下：

.box {
  background: lightblue;
  width: 600px;
  overflow: hidden;
  /* 设置相对定位，作为子元素绝对定位的参考容器 */
  position: relative;
}
.right {
  background: lightcoral;
  opacity: 0.5;
  border: 3px solid saddlebrown;
  width: 300px;
  min-height: 100px;
  /* 绝对定位，与left容器重叠 */
  position: absolute;
  top: 0;
  left: 0;
  /* Flex布局实现item水平排列，超出自动换行 */
  display: flex;
  flex-wrap: wrap;
}
.left {
  background: lightseagreen;
  border: 3px solid saddlebrown;
  width: 200px;
  height: 200px;
  /* 绝对定位，脱离文档流，与right互不影响 */
  position: absolute;
  top: 0;
  left: 0;
  /* 可选：如需left显示在right上方，添加z-index */
  /* z-index: 1; */
}
.item{
  background: lightslategrey;
  width: 50px;
  height: 50px;
  margin: 10px;
}

关键说明 #

1. .box设置position: relative，确保子元素的绝对定位以该容器为基准
2. .left和.right均使用position: absolute，脱离正常文档流，实现重叠且互不影响布局
3. .right通过display: flex和flex-wrap: wrap让内部item水平排列，超出容器宽度自动换行
4. 若需调整两个容器的层级关系，可通过z-index属性控制数值大小，数值大的容器会显示在上方

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