CSS中为什么overflow:hidden能清楚浮动float的影响

发布网友 发布时间：2022-04-06 10:56

我来回答

共7个回答

热心网友 时间：2022-04-06 12:25

一、有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就能撑开

热心网友 时间：2022-04-06 13:43

我的理解是overflow想要清除溢出的内容起码你得给个边界吧，从楼主的例子也可以看出如果写overflow的容器没有高度那它就会取子元素的高度(如果没有高度也要强行隐藏那不就什么都没得了)。至于清除浮动的效果..我也只是个初心者并不是大佬恕我无法解答了。

热心网友 时间：2022-04-06 15:18

overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开。
看看这个不知道你能不能理解追问这篇文章我看过，他是在结果成立的基础上来用证据来证明结果，他说“将父块div的高度值删除后，父块高度自动被子块高度值给撑开了。说到这里，我们再来理解一下“浮动”这个词的含义……”，他讲都没讲明白就转换到其他概念上了，在一个个已经成立的结果上推演。为什么没有指定高宽时它就撑开父块，我想知道的是为什么会产生这个结果，而不是产生另外的结果，需要这个结果的本源，由前往后推理，而不是在结果上来推理证明结果。

追答我觉得他说的还比较清楚了啊，他说要理解“浮动”，没有转换到其他概念啊，因为盒子里面的元素是浮动元素的时候，盒子用overflow:hidden就有清除浮动的效果，等于是浮动的元素和盒子又在一个层上了，父元素又没有指定高度，所以就会根据子元素撑开了父元素的高度，而不是溢出隐藏切掉多出来的部分嘛。
他不是说了“......这就是overflow:hidden这个属性清除浮动的准确含义。”

参考资料：http://www.chinaz.com/design/2008/0818/35473.shtml

热心网友 时间：2022-04-06 17:09

　　overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含
义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这
个词到底包含什么样的含义呢？我们下面来详细的阐述一下。

　　这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验

　　

#box{ 
          width:500px; 
          background:#000; 
          height:500px;
 } 
#content { 
          float:left; 
          width:600px; 
          height:600px; 
          background:red;
 }

　　给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们知道overflow:hidden这个属性的作用是隐藏溢
出，给box加上这个属性后，我们的content
的宽高自动的被隐藏掉了。

　　另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content
这个div的高度值给撑开了。说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这
不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content
这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content
的宽高是多少，对于已经脱离了的box来说，都是不起作用的。

　　当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个
属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content
等等带浮动属性的div的在这个立体的浮动已经被清除了。

　　这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个
div设置高度的时候，content
这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content
这个div的高度是多少，box这个高度都是我们设定的值。而当content
的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！

热心网友 时间：2022-04-06 19:17

这个是溢出隐藏的意思，父块要设置宽度。

热心网友 时间：2022-04-06 21:42

终于搞明白了。越来overflow:hidden的作用是触发bfc。

热心网友 时间：2022-04-07 00:40

说清楚一点