overflow ：hidden详细解释
overflow hidden清除浮动原理
overflow hidden清除浮动原理
overflow: hidden属性是用来清除浮动的一种方式，其原理是通过创建一个包含浮动元素的父容器，然后对该容器应用overflow: hidden属性。
这样可以使父容器形成一个“包裹”浮动子元素的区域，从而清除浮动带来的影响。
当元素浮动时，它会脱离正常的文档流，导致其后续元素不再占据浮动元素的位置，从而可能造成布局混乱或者重叠。
通过在父容器上设置overflow: hidden属性，可以触发BFC（块级格式化上下文），这个特性会使得该容器能够正确地包含浮动元素，并且不会受到浮动元素的影响。
当父容器应用overflow: hidden属性时，它会创建一个新的块级格式化上下文，这会使得父容器的高度被浮动元素撑开，从而避免布局问题。
同时，父容器会剪切超出其边界的内容，因此浮动元素在视觉上仍然是可见的，但是不会影响其他元素的布局。
需要注意的是，overflow: hidden属性只能清除浮动带来的布局问题，并不能解决浮动元素在其他方面可能引发的一些问题。
此外，还有其他清除浮动的方法，如使用clearfix类、使用伪元素清除浮动等，在具体场景中可以根据需要选择合适的方法。
css之overflow：细探之下有意想不到的结果
css之overflow：细探之下有意想不到的结果overflow是⼀个⾮常常⽤的 CSS 属性，⼀般来说会认为很简单，其实细究之后就会发现他还有很多⼩特性或者说意想不到的结果；下⾯就介绍下（在浏览器环境下）关于overflow的⼩总结。
哪些元素上有效？⾸先overflow是应⽤到哪些元素上有效的，任意元素？当然不是，它只能应⽤于块容器上。
那什么是块容器呢？简单来说：除了table和可替换（置换）元素之外的块级元素都是块容器元素；但是反过来说块容器元素⼀定是块级元素的吗？当然也是 NO ，这是因为对于⾮替换的inline-block元素和table-cell元素⽽⾔，他们是块容器元素但是却不是块级元素。
作⽤overflow属性指定了⼀个块容器元素在其内容溢出这个元素的时候，内容是否裁掉。
overflow的值可以取的值有：visible（初始值）hidden、scroll、auto、inherit。
下⾯分别介绍下他们的含义：visible这个属性表明内容不会被裁剪，所以说他可能超出渲染，也是初始值。
hidden这个属性表明内容超出的部分需要裁剪掉。
scroll这个属性表明超出内容不会裁剪掉，浏览器提供滚动机制来让⽤户看到超出内容，还有就是不管超出不超出他都是要显⽰的（也就是浏览器的滚动条背景的那个东东）。
auto如果超出的话，应该有滚动条。
inherit继承⾃他的⽗级元素（或者祖先元素）。
其他“作⽤”overflow的值为⾮visible的时候可以⽣成新的BFC（块级格式化上下⽂），常见的结果就是：消除浮动影响、左侧固定右侧⾃适应（不需要指定margin-left）、margin不再折叠等。
overflow:hidden搭配white-space:nowrap、text-overflow:ellipsis实现...效果。
overflow:hidden可以让1px（scale(0.5)这种）显⽰的更加精细。
overflow参数
overflow参数1. visible：默认值。
当内容溢出容器时，会显示在容器外部，不会被修剪或隐藏。
2. hidden：溢出的内容会被修剪，并且在容器外不可见。
3. scroll：如果内容溢出容器，会显示滚动条，以便滚动查看内容。
4. auto：如果内容溢出容器，则根据需要显示滚动条，如果内容没有溢出，则不显示滚动条。
5. inherit：继承父元素的overflow属性值。
一般来说，overflow属性可以用于任何块级元素，包括div、p、ul、table等。
下面是对每个取值的详细说明和示例：1. visible：该值表示元素内容可以超出容器尺寸，不进行修剪，并且在容器外部显示。
这是默认值。
```<div style="width: 200px; height: 200px; border: 1px solid black; overflow: visible;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis velit vel turpis tincidunt congue.</p> </div>```2. hidden：该值表示溢出的内容会被修剪，并且在容器外不可见。
```<div style="width: 200px; height: 200px; border: 1px solid black; overflow: hidden;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis velit vel turpis tincidunt congue.</p> </div>```3. scroll：该值表示如果内容溢出容器，会显示滚动条以便滚动查看内容。
css3 中对溢出的处理
css3 中对溢出的处理
在CSS3中，有以下几种对溢出进行处理的属性：
1. `overflow`属性：控制内容溢出容器时的处理方式。
常用值有：
- `overflow: visible;`（默认值）：内容可溢出容器并显示在容器外部。
- `overflow: hidden;`：内容溢出容器时将被裁剪隐藏。
- `overflow: scroll;`：内容溢出容器时显示滚动条，无论内容是否溢出。
- `overflow: auto;`：自动决定是否显示滚动条，当内容溢出容器时显示滚动条。
2. `text-overflow`属性：控制文本溢出容器时的处理方式。
常用值有：
- `text-overflow: clip;`（默认值）：直接裁剪文本，不显示省略号。
- `text-overflow: ellipsis;`：将溢出的文本显示为省略号。
3. `white-space`属性：控制文本的换行方式。
常用值有：
- `white-space: normal;`（默认值）：允许文本换行。
- `white-space: nowrap;`：禁止文本换行，超出容器宽度时会溢出。
4. `word-break`属性：控制文本在换行时的断字方式。
常用值有：
- `word-break: normal;`（默认值）：按照默认的断字规则进
行断字。
- `word-break: break-all;`：无论是否有空格或连字符，都会进行断字。
这些属性可以根据需求进行组合使用，来处理溢出的情况。
overflow hidden什么意思
overflow hidden什么意思overflow hidden是CSS中一个常用的属性，它用于控制元素在内容溢出时的显示方式。
当设置元素的overflow属性为hidden时，超出元素边界的内容将被隐藏，观察者无法看到或者操作超出边界的部分。
在本文档中，我们将深入了解overflow hidden属性的具体意义和使用场景，并提供一些实际的示例来帮助读者更好地理解这个属性。
在开发网页时，经常会遇到元素内容超出容器边界的情况。
这可能会导致页面的布局混乱，或者影响用户的查看体验。
为了避免这种情况，我们可以使用CSS中的overflow hidden属性来处理这类问题。
首先，我们需要了解overflow属性的不同取值，以便更好地理解overflow hidden的意义。
CSS中的overflow属性有以下几个取值：1. visible：默认值。
内容会从元素框之外继续显示，不会被剪辑。
2. hidden：内容会被裁剪，并且用户无法对裁剪的部分进行查看或者操作。
3. scroll：如果内容溢出元素框，会显示滚动条，用户可以通过滚动条来查看全部内容。
4. auto：如果内容溢出元素框，会显示滚动条，只有在内容超出元素框时才会显示滚动条。
接下来，我们将重点解释overflow hidden的意思及其用途。
overflow hidden的主要作用就是裁剪超出元素框的内容，使其不显示在页面上。
这在设计时可以用来控制元素的尺寸和位置。
当一个元素的内容超出容器边界时，我们可以将该元素的overflow属性设置为hidden，这样就能确保超出部分被隐藏起来，不干扰其他元素的布局。
举个例子，假设我们有一个div容器，其宽度为200px，高度为200px。
如果我们在这个容器中放置一个宽度为300px，高度为300px的图片，那么图片就会超出容器边界。
如果我们将容器的overflow属性设置为hidden，图片超出的部分就会被隐藏，不会影响其他元素的显示效果。
关于overflow：hidden
对于overflow:hidden的功能就是说超出部分不显示，达到一个效果“让子元素只在父元素内显示”
（1、是剪掉外面的 2、撑开显示）对应下面两种情况。
有两种情况：
1、有宽度高度值（是剪掉外面的 ）：这样会剪切掉父元素外的子元素，达到“让子元素只在父元素内显示”的效果。（这才是overflow:hidden的正确用法）
二、无overflow:hidden
也有两种
1、有宽度高度值，显示为出
2、无宽度高度值，就会被撑开（因为没有分离父子），加了”float：left；“ 浮动分离了父子元素，而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果，所以不撑开，反而父块的高度塌陷消失
2、无宽度高度值（撑开显示），这样就没有固定边界让它无法识别那是为那是内，但是还是要达到“让子元素只在父元素内显示”的效果，这样寻找边界以达到这种效果，我们不难发现在最大显示子元素（也就是子元素的边上时）刚好能达到“让子元素只在父元素内显示”的效果。即使有了 ”float：left；“ 浮动分离了父子元素，分离是分离但是还是父子啊（就像断绝父子关系，但是血浓于水，生理上有遗传），只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。（这个是技巧）
不是高手初学者...望指正
hight因为固定了高度撑不开 用min-hight就没问题了
而且ie6中无法识别min-hight，且把hight当成min-hight所以说ie6的高度只能设定最小高度，所以ie6不用overflow：hidden就能撑开
全面阐述overflow-hidden属性
clear:both;这个一般是处理左右浮动的出现的问题，当然这不是绝对的。
4. 关于常见清除浮动方法总结和分析
� 使用空标签清除浮动。我用了很久的一种方法，空标签可以是 div 标签，也可以是 P 标 签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上 可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这 样一个标签清除浮动，并为其定义 CSS 代码：clear:both。此方法的弊端在于增加了无 意义的结构元素。
<body> <form id="form1" runat="server">
<div> <div id="outside"> <div id="inside"> 内div </div> <div style="background-color: Green; width: 100; height: 100px;"> 我在测试啊(其他div) </div> 父div </div>
说明： 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 设置 textarea 对象为 hidden 值将隐藏其滚动条。 对于 table 来说，假如 table-layout 属性设置为 fixed，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 hidden，scroll 或者 auto，那么超出 td 尺寸的内容将被剪切。 如果设为 visible，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单 元格。
dreamweaver网页设计系列：深刻理解overflowhidden的属性
如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。
这些在ie6里面是正确的。
但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。
我们发现，当nei这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。
在我的例子中，都是500。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的nei的宽高自动的被隐藏掉了。
另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。
我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当nei这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。
打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||）OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。
也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB 内，JJ的大小自然又会影响到BB的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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的高度的时候，超出的部分就会被隐藏。
这就是隐藏溢出的含义！。