CSS多个Div样式无法协同工作问题咨询

看起来你遇到的阴影异常，核心问题是浮动元素让父容器高度塌陷了。.prodhome-category用了float:left，但它的父容器.prodhome-boxshadow没有处理浮动，导致父容器的高度没法被子元素撑开——阴影是基于父容器的尺寸渲染的，父容器高度为0的话，阴影自然就显示不正常了。

下面给你几个可行的解决办法，按推荐程度排序：

方法1：用伪元素清除浮动（最推荐，无额外DOM） #

这是现代前端处理浮动塌陷的标准方案，不需要修改HTML结构，只需给父容器加个伪元素样式：

.prodhome-boxshadow{ 
  padding: 10px; 
  box-shadow: 5px 10px 18px #888888; 
}
/* 添加伪元素清除浮动 */
.prodhome-boxshadow::after {
  content: "";
  display: table;
  clear: both;
}

伪元素会在父容器末尾生成一个隐形的块级元素，自动清除浮动，让父容器正确包裹住所有子元素。

方法2：给父容器触发BFC（简洁高效） #

BFC（块级格式化上下文）会让容器自动包裹内部的浮动元素，只需给.prodhome-boxshadow加个overflow属性即可：

.prodhome-boxshadow{ 
  padding: 10px; 
  box-shadow: 5px 10px 18px #888888; 
  overflow: auto; /* 或者用overflow: hidden; 二者都能触发BFC */
}

这个方法代码最少，适合快速解决问题，注意如果子元素有超出容器的内容，overflow:hidden会裁剪掉，overflow:auto会出现滚动条，按需选择。

方法3：调整现有.clearrow的位置和样式 #

你已经写了.clearrow，但之前把它放在了父容器外面，应该移到父容器内部的最后，同时给它添加清除浮动的样式：

.clearrow {
  clear: both;
  height: 0;
  overflow: hidden;
}

修改后的HTML：

<div class="prodhome-boxshadow">
  <div class="prodhome-category">
    <h1>Product-title</h1>
    <img src="" />
  </div>
  <div class="clearrow"></div> <!-- 移到父容器内部 -->
</div>

额外小优化：图片居中的问题 #

你给.prodhome-category img加的align-content: center是无效的——这个属性只对flex容器生效。如果想让图片水平居中，给.prodhome-category加text-align:center就行：

.prodhome-category { 
  width:22%; 
  float:left; 
  margin:0 1.65% 3.55%; 
  text-align: center; /* 让内部图片和文字水平居中 */
}

内容的提问来源于stack exchange，提问作者Richard S.