个回答

• kelion

  2020-06-18 14:07:39

  仅对于 img 元素来说的话，overflow 的值是哪个都可以，因为对于 img 都会失效。

  既然会失效，那为什么要用 overflow，而且是 hidden，那是因为与 img 同级的兄弟元素可能溢出容器范围。

  那你问设置 visible: visible 可以嘛？当然可以，如果 img 元素的兄弟元素里的内容不会溢出容器的话。

  再问既然都不会溢出，也没别的需求，那完全不用 overflow  可不可以？当然可以。因为此处用 overflow 完全就是为了防止内容溢出的，而不是防止 img 元素会怎么样怎样的。

  
  

  总结一下：

  0  首先明白，overflow 为什么会对案例中 img 元素无效

  ① 图片移到右侧使用的是 absolute 跟 text-align，与 overflow 无关

  ② overflow 只作用于与 图片同级的 非 absolute 元素里的内容，防止溢出容器  

  
  

  下面给个溢出效果的代码案例：

  <div style="height: 300px;overflow:auto">
      <div class="h0 ovh tr" style="height: 700px;width: 600px;
                 margin:0 auto;background-image: url(./53937347_p0.png);
                 background-repeat: no-repeat;        
                 background-position: center center;        
                 background-size:cover">        
          &nbsp;
          下面就是会溢出的文本，所以父级会用 overflow: hidden;
          <br>
          dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd        
         <img class="abs ml30 mt30" style="height: 80px;" src="./53937347_p0.png" alt="">
      </div>    
  </div>

  
  

  1