/*css样式*/
<style type="text/css">
.box{ background:skyblue;
overflow: hidden; /*解决外边距塌陷*/
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
/*html*/
<div class="box">
<div class="kid">子元素1</div>
</body>
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。/*css样式*/<style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏*/ }</style> /*html*/<
2.清除浮动
当div不设置高度的时候，内部的元素又设置了float的时候，这个时候内部的元素会脱离div的那一层，这个时候div因为元素脱离，高度就会变成0，这个时候div后面的元素就会顶上来。
解决：给父元素添加声明 overflow:hidden;
（高度塌陷解决方法二：在浮动元素下方添加空div，并给该元素添加声明：
clear:both;）
3.子级设置margin-top，父级一起移动
当div里面的元素设置了marg
二. overflow:hidden 清除浮动
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。那么问题来了，如下：
如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-U...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-C
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。
测试代码：
<html>
<head>
<title></title>
<style>
.aBox{
background-col...
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并 整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。
1.对于在IE下不兼容overflow:hidden;而FF下兼容的情况
加一个 positi
overflow:hidden 中文是溢出隐藏的意思。但是在使用的过程中我们发现并不是所有的情况都适用。
这是我们对其属性的模糊理解所带来的问题
css规范中有这样一段话
This property specifies whether content of a block container element is clipped when it overflows the element’s bo...
先来看两个overflow:hidden的使用例子。1、嵌套布局内部块元素设置float:left时，导致外部元素塌方，高度为0的问题。
CSS和HTML分别如下：.wrap {
outline: red 1px solid;
width: 250px;
/*overflow: hidden;*/
}.item {
height: 20px;
width:
引用 https://www.cnblogs.com/ympjsc/p/11800472.html 大神的总结
要想彻底清除浮动的影响，适合的属性不是 clear 而是 overflow。
一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。
我们都知道overflow:hidden的字面意思是超出隐藏，说到这个超出隐藏就跟父元素的高度有关了，高度一定了的时候，超出隐藏才有依据。
我们知道当子元素开始浮动了，会脱离文档流，其父元素的高度就
功能2、消除浮动
在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。
解决办法：在父容器中除定义宽和高的值以外，还必须写overflow:hidden，这样就能把子容器的其它内容隐藏。 但是在火狐或者其他浏览器里面发现，当子容器这个div的宽度和高度都大于父容器这个div的时候，父容器并没有被内撑开而是依旧显示为我们指定的宽高。如下图：
例如：结构如下：<di
最近学习css的overflow元素的hidden属性，总结2点作用：
1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏
2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
作用1示例:
<!DOCTYPE html>
<...
overflow:
hidden作用
1、
作用：
当子元素浮动后，子元素会从文档流变为浮动流，会脱离父元素的框架，这是父元素会因为没有子元素的撑起，而高度为0即（高度
塌陷），这时在父元素中添加
overflow:
hidden子元素就会撑起父元素的高度。
2、下面我们给一个父元素，再给一个子元素
当没有在父元素写
overflow:
hidden时，父元素的背景不会显示
当写上
overflow:
hidden,背景会显现
3、
解决方法二
也可以给父元素设置好宽高
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。
#------------------------------------------------我是可耻的分割线-------------------------------------------
Overflow属性意思是超过我的范围隐藏，我们写一个div标签在里面设置高度和宽度，标签里面写一个img标签加载一个图...
ERROR TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
20574
