图片浮动引发容器对应侧边框不可见的技术问题咨询

这个问题的核心原因是浮动元素的渲染层级高于父容器的边框：当你给图片设置float: right/left时，图片会脱离常规文档流，加上它的宽度自动计算后超过了容器的300px宽度，溢出容器的部分会直接覆盖在父容器的对应侧边框上，导致边框看起来“消失”了。

下面是几个可行的解决办法：

方法1：通过z-index调整层级关系 #

给父容器设置相对定位和更高的z-index，让边框的层级高于浮动的图片：

.photo {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow: visible;
  margin-top: 20px;
  margin-left: 20px;
  position: relative; /* 开启相对定位，让z-index生效 */
  z-index: 1; /* 提升容器层级 */
}
img {
  height: 100%;
  width: auto;
  float: right;
  z-index: -1; /* 降低图片层级，让边框显示在上方 */
}

方法2：用padding隔开边框与内部元素 #

给父容器添加和边框宽度一致的左右内边距，同时开启box-sizing: border-box保证容器总尺寸不变，这样图片就不会直接贴在边框上：

.photo {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow: visible;
  margin-top: 20px;
  margin-left: 20px;
  padding: 0 1px; /* 左右内边距等于边框宽度 */
  box-sizing: border-box; /* 内边距不会增加容器总宽度 */
}
img {
  height: 100%;
  width: auto;
  float: right;
}

方法3：改用绝对定位替代浮动 #

用绝对定位来控制图片的位置，同时父容器设置相对定位，这样图片不会因脱离文档流导致层级覆盖问题：

.photo {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow: visible;
  margin-top: 20px;
  margin-left: 20px;
  position: relative; /* 作为绝对定位元素的参考容器 */
}
img {
  height: 100%;
  width: auto;
  position: absolute;
  right: 0; /* 对应原来的float:right效果，换成left:0就是左对齐 */
}

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