css样式坍塌,高度塌陷 css

css中这三个的使用有什么区别：1 overflow:hidden；2 overflow:auto;zoom:1;3 overflow:auto; height:1%;

一、就 overflow 这个样式而言，题主应该了解，或者自行百度下：（以下摘自百度百科）

CSS属性

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

基本特性

适用于：block-level and replaced elements

JavaScript 语法：object.style.overflow="scroll"

基本语法

overflow-x overflow-y

overflow : visible | auto | hidden | scroll

二、关于清除浮动，其中就有使用 overflow 来达到闭合元素来修复高度坍塌的现象。

① overflow:hidden;，

  只要使用了这个样式的元素都会闭合，触发 hasLayout；

② overflow:auto;zoom:1;，

  在不使用 overflow:hidden 的场景下，需要触发 hasLayout ，可以用 zoom: （normal以外的值） 这个样式；

③ overflow:auto;height:1%;，

  在不使用 overflow:hidden 的场景下，需要触发 hasLayout ，可以用 height: （auto以外的值）这个样式，1%是为了在实现非0。

可以参考以下：

相关问答

Q1: Css—float的影响和解决方案

推荐俩种依靠clear属于清除浮动的方法，推荐第二种，探究的记录在后面，赶时间的看个开头就好了。

1. 在受浮动坍塌的父级元素结束标签前，添加一个高宽为0的空div，然后设置 clear:both

2 .创建一个clearfix样式，并使用伪类元素 after 添加样式到父元素上

无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框，并且可以编辑它的宽高，此时该浮动元素就脱离了文档流。举个例子，把网页看成一个三维的泳池，文档流在泳池底部，给文档流中一个元素设置了float之后，它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡，而是像和它一起浮在水面上一样环绕这个浮动元素。

根据前面介绍，元素设置float后好像会从网页上浮一样，脱离文档流。这样的话，如果父级元素原本没设置高度，计划用子元素撑开父级元素。此时子元素因为float上浮，则父级元素的高度就会因为自身没设置而坍塌。

来个示例 ( 下文都是依据这个示例来讨论，故先给出HTML结构和CSS样式 )：

让我们再打开开发者工具具体看看

然后让我们把父元素也一同浮动看看

例如:

此时背景色为粉色的 ch2 就会被浮动的 背景色半透明的ch1 覆盖，但是ch2的字体还是环绕着ch1

如果让ch2 也浮动，则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。

另外，ch2 虽然不浮动起来时会被 同级ch1遮挡，但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。

解决父元素高度坍塌的问题，其实可以给父元素指定个高度，但这样就没有父元素高度自适应的意义了；另外全部元素一起浮动也能解决父元素坍塌，子元素被遮挡的问题，但这本质上只是将所有元素一起浮动到顶端，并没有解决问题，反而还会影响另外的元素排列。下面介绍clear属性来清除浮动

那我们先来看看 clear 属性有什么用

我们稍稍改动一下上面的例子在 ch2 下加一个 p 标签然，然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。

若此时我们给p元素也加上浮动呢？

样例：

Q2: css的样式问题。

1，是继承关系，.Hot样式继承.itemHit样式

2，好处：.Hot继承.itemHit已经拥有的样式，去除冗余CSS代码，突出了CSS的继承思想

3，可以分开写，但是.Hot无法拥有继承CSS样式，只拥有本身CSS样式

Q3: css 样式重定义的问题

问题1，很显然是不合理的，增加一个属性可以，改变就不行。如果硬要这样做，可以采取细一点的方式，例如为a定义一个样式： .apage a 和 .bpage a 在A页面是div class="apage"a ....../a/div 而在B页面 则是 div class="bpage"a ....../a/div

问题2，尽量将所有的样式表都放在一个单独的CSS文件里，网站所有的页面都调用这一个文件。要明白，CSS、HTML 都不是运行程序，而只是代码，效率和文件的大小有很直接的关系，如果10个页面10个CSS，明显的没有达到这样的目的。

浏览器打开一个页面时，同时也下载了CSS到IE的临时文件夹中（除非CSS不是一个单独的文件），再打开其他页面，如果引用的是同一个CSS，就不会再进行下载。显而易见，下载10个文件要比下载1个文件效率低得多，即使这1个文件比10文件加起来还大。

回复楼下的看法：一个网站的所有页面不可能有非常多的区别，况且CSS是在客户端执行，完全不涉及到服务端，况且浏览器是先看样式名，再根据样式名去查找相符合的样式。不是把所有的样式都遍历一次，你所说的打开页面慢、CUP频率高貌似不大可能出现。即使有，那也不是因为样式表很大的缘故，即使是因为样式表非常大，这样的影响也小到可以忽略，即使明显，也只是在客户端，和客户机有较大关系，对服务端不会造成任何压力。

如果你很不喜欢这样的方式，至少可以把布局大致相同的页面引用某一个CSS，完全不相同的引用另一个CSS。但是一个页面一个CSS，绝对更不可取。

Q4: css怎么处理外边距坍塌呢？

1、给父元素定义上边框

2、给父元素定义上内边距

3、给父元素添加 overflow：hidden；

4、添加浮动

5、添加绝对定位