overflow:hidden作用能治住塌陷,overflow溢出隐藏影响div

一. overflow:hidden 溢出隐藏

　　设置溢出：隐藏在一个元素中，那么如果元素的内容超过了给定的宽度和高度属性，超出的部分将被隐藏，不被占用。

　　/* CSS style */style type= text/CSS div { width:150 px；高度：60px背景：天蓝色；溢出：隐藏；/* overflow hidden */}/style/* html */div style= 今天天气真好！Br，今天天气很好！Br，今天天气很好！Br，今天天气很好！Br/div具有以下效果：

　　一般在页面中，溢出后会显示省略号。例如，当一行文本超出固定宽度时，超出的内容将被隐藏，省略号将被显示。

　　/*仅适用于单行文本*/div { width:150 px；背景：天蓝色；溢出：隐藏；/*溢出隐藏*/空白：nowrap/*规定文本不得换行*/text-overflow:省略号；/*显示省略号(.)当对象内的文本溢出*/}时，效果如下：

二. overflow:hidden 清除浮动

　　一般来说，当父元素不设置高度时，高度会自适应于内容。当父元素中的所有子元素都设置了floating float时，子元素将脱离标准流程，不再占据任何位置。父元素无法检测到子元素的高度，并且父元素的高度为0。那么问题来了，如下：

　　/* CSS style */style type= text/CSS 。框{背景：天蓝色；} .kid { width:100px；高度：100px浮动：左；} .kid1{背景：黄色；} .kid2{背景：橙色；} .wrap { width:300 px；高度：150px背景：蓝色；颜色：白色；}/style/* html */body div class= box div class= kidkidkid 1 子元素1/div div class= kidkidkid2 子元素2/div /div div class=wrap 其他部分/div/body

　　如上，因为父元素没有高度，后面的元素会向上推，导致页面折叠。所以需要给父容器添加一个overflow:hidden属性，让父容器的高度适应子容器的高度和子容器的内容。如下所示：

　　因为溢出：隐藏；在IE较低版本的浏览器中使用；达不到这个效果，所以需要加缩放：1；

　　所以为了让兼容性更好，如果需要overflow:hidden来清除浮动，最好加上zoom:1；

　　/* CSS style */style type= text/CSS 。框{背景：天蓝色；溢出：隐藏；/*清除浮动*/zoom:1；} .kid { width:100px；高度：100px浮动：左；} .kid1{背景：黄色；} .kid2{背景：橙色；} .wrap { width:300 px；高度：150px背景：蓝色；颜色：白色；}/style/* html */body div class= box div class= kidkidkid 1 子元素1/div div class= kidkidkid2 子元素2/div /div div class=wrap 其他部分/div/body

三. overflow:hidden 解决外边距塌陷

　　父元素中有子元素。如果向子元素添加顶部边距样式，父元素也将跟随，导致外部边距折叠，如下所示：

　　/* CSS style */style type= text/CSS 。框{背景：天蓝色；} .kid { width:100px；高度：100px背景：黄色；margin-top:20px }/style/* html */body div class= box div class= kid 子元素1/div /div/body

　　因此，在父元素中添加overflow:hidden可以解决这个问题。

　　/* CSS style */style type= text/CSS 。框{背景：天蓝色；溢出：隐藏；/*解决外边缘的塌陷*/}。kid { width:100px；高度：100px背景：黄色；margin-top:20px }/style/* html */body div class= box div class= kid 子元素1/div /div/body

　　关于解释溢出的作用：隐藏(溢出隐藏，浮动清除，解决外缘塌陷)的这篇文章到此为止。有关溢出：隐藏的功能的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。