css的浮动受到限制，用overflow:hidden无效

更新时间2019-04-25 10:59:12

<div id="scrollWheelChart">
  <ul>
   <li class="1"><a href=""><img alt="1.jpg" src="../images/index/1.jpg"></a></li>
   <li class="2"><a href=""><img alt="2.jpg" src="../images/index/2.jpg"></a></li>
   <li class="3"><a href=""><img alt="3.jpg" src="../images/index/3.jpg"></a></li>
   <li class="4"><a href=""><img alt="4.jpg" src="../images/index/4.jpg"></a></li>
  </ul>
 </div>

一、有overflow:hidden对于overflow:hidden的功能就是说超出部分不显示，达到一个效果“让子元素只在父元素内显示”（1、是剪掉外面的 2、撑开显示）对应下面两种情况。有两种情况：1、有宽度高度值（是剪掉外面的 ）：这样会剪切掉父元素外的子元素，达到“让子元素只在父元素内显示”的效果。（这才是overflow:hidden的正确用法）2、无宽度高度值（撑开显示），这样就没有固定边界让它无法识别那是为那是内，但是还是要达到“让子元素只在父元素内显示”的效果，这样寻找边界以达到这种效果，我们不难发现在最大显示子元素（也就是子元素的边上时）刚好能达到“让子元素只在父元素内显示”的效果。即使有了  ”float：left；“    浮动分离了父子元素，分离是分离但是还是父子啊（就像断绝父子关系，但是血浓于水，生理上有遗传），只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。（这个是技巧）二、无overflow:hidden也有两种1、有宽度高度值，显示为溢出2、无宽度高度值，就会被撑开（因为没有分离父子），加了”float：left；“    浮动分离了父子元素，而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果，所以不撑开，反而父块的高度塌陷消失不是高手初学者...望指正hight因为固定了高度撑不开 用min-hight就没问题了而且ie6中无法识别min-hight，且把hight当成min-hight所以说ie6的高度只能设定最小高度，所以ie6不用overflow：hidden就能撑开

相关标签:css