display:inline下<br>换行失效、图片hover放大裁剪CSS问题

两个问题是连锁触发的：

• 当#instagram-feed1设为display: inline时，内部图片项用了float: left布局，行内父元素无法识别浮动子元素的高度，直接出现高度塌缩（实际渲染高度为0），后面的<br>相当于紧贴着0高度的元素换行，根本撑不开间距，必须堆十几个换行标签才能硬凑出足够的下移距离。
• 当你把#instagram-feed1改成display: block时，父元素.instagram_feed上写死的overflow: hidden会把悬停时放大超出容器范围的图片直接裁掉，才会出现“改display就换行正常但放大被裁，改回inline就放大正常但换行失效”的矛盾。

直接按下面改CSS即可，不需要堆大量<br>标签，也不会出现图片裁剪问题：

1. 调整Instagram feed容器的基础样式，解决高度塌缩和裁剪问题

/* 覆盖原来的instagram feed容器样式 */
.instagram_feed {
  position: relative;
  overflow: visible; /* 删掉原来的overflow: hidden，避免放大的图片被裁剪 */
}

#instagram-feed1 {
  display: block; /* 改回block布局 */
  margin-bottom: 32px; /* 用外边距控制和下方Gallery标题的间距，数值按需调整，替代多余br标签 */
}

/* 加清除浮动规则，让父元素能正确计算浮动子元素的高度，解决高度塌缩 */
.instagram_feed::after {
  content: "";
  display: block;
  clear: both;
}

2. 修正原有CSS的无效属性
   你原来写的过渡属性值有笔误，transition:all 0.3s ease0s;里的ease0s是无效值，改成ease 0s，否则悬停动画可能失效：

.instagram_feed img.insta-image {
  position: absolute;
  left:0;
  top:0;
  object-fit: cover;
  width:100%;
  height:100%;
  transition:all 0.3s ease 0s; /* 修正笔误 */
  -webkit-transition:all 0.3s ease 0s;
  -moz-transition:all 0.3s ease 0s;
  -ms-transition:all 0.3s ease 0s;
  -o-transition:all 0.3s ease 0s;
}

3. 清理冗余代码
   删掉Instagram模块和Gallery模块之间多余的<br>标签，靠上面加的margin-bottom控制间距即可，布局会稳定很多，不会出现不同屏幕下间距错乱的问题。悬停状态下写的重复position: absolute、display: inline这类和默认状态重复的声明可以删掉，不影响效果。

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