R Shiny中设置包含两个子div的外层div背景色不生效如何解决？

两个子div都设置了float: left属性，浮动元素会脱离普通文档流，父级div没有被内容撑开、高度为0，因此你设置的背景色无法正常显示。

下面提供3种可直接落地的方案：

• 方案1：给外层div添加overflow: auto触发BFC，自动撑开父元素高度
  修改后的外层div代码如下：

  div(
         div(fileInput(inputId = "file1",
                       label = "File 1"),
             style="min-width:200px;max-width:45%; float:left; margin-right:2.5%;"),
                                
         div(fileInput(inputId = "file21",
                       label = "File 2,1"),
             fileInput(inputId = "file22",
                       label = "File 2,2"),
             style="min-width:200px;max-width:45%; float:left;"),
     style = "width: 100%; background-color:#ADD8E6; overflow: auto;"),
  

• 方案2：在外层div的子元素末尾添加清除浮动的占位div
  不需要修改原有样式，仅在两个子div后新增一行清除浮动的代码即可：

  div(
         div(fileInput(inputId = "file1",
                       label = "File 1"),
             style="min-width:200px;max-width:45%; float:left; margin-right:2.5%;"),
                                
         div(fileInput(inputId = "file21",
                       label = "File 2,1"),
             fileInput(inputId = "file22",
                       label = "File 2,2"),
             style="min-width:200px;max-width:45%; float:left;"),
         div(style = "clear: both;"), # 新增清除浮动的空div
     style = "width: 100%; background-color:#ADD8E6;"),
  

• 方案3：替换float布局为更易用的flex布局（更推荐）
  不用处理浮动塌陷问题，布局逻辑更清晰，适配性更好：

  div(
         div(fileInput(inputId = "file1",
                       label = "File 1"),
             style="min-width:200px;max-width:45%;"),
                                
         div(fileInput(inputId = "file21",
                       label = "File 2,1"),
             fileInput(inputId = "file22",
                       label = "File 2,2"),
             style="min-width:200px;max-width:45%;"),
     style = "width: 100%; background-color:#ADD8E6; display: flex; gap: 2.5%; flex-wrap: wrap;"),
  

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