overflow:hidden的使用

一、溢出隐藏

如果某一元素内容超过所给定的宽高，就会溢出。

<style type="text/css">.box{background-color: lightblue;width: 400px;height: 60px;margin: 0 auto;text-align: center;}
</style><body>
<div class="box">今天天气好晴朗！处处好风光！<br>今天天气好晴朗！处处好风光！<br>今天天气好晴朗！处处好风光！<br>今天天气好晴朗！处处好风光！<br>
</div>
</body>

使用overflow:hidden

二、清除浮动

当父元素没有设置高度时，当父级元素内部的子元素全部都设置浮动float后，子元素会脱离标准流，不占位，所以父级元素高度为0。

<style type="text/css">.father{background-color: black;}.box{width: 50px;height: 50px;float: left;}.a{background-color: red;}.b{background-color: pink;}.c{background-color: blue;}
</style><body>
<div class="father"><div class="box a">1</div><div class="box b">2</div><div class="box c">3</div>
</div>

样式：（看不到父元素的背景色）

给父元素设置 overflow:hidden，这样父级的高度就随子级容器及子级内容的高度而自适应

三、解决外边距塌陷

当父元素内有子元素，想给子元素增加margin-top。但是此时并不是子元素和父元素之间有边距，而是父元素会随着子元素往下掉，是父元素和浏览器增加了外边距。

.father{background-color: black;
}
.box{width: 50px;height: 50px;background-color: red;margin-top: 10px;
}

给父元素设置overflow:hidden，

overflow:hidden的使用相关推荐

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
overflow:hidden;zoom:1 理解转__
overflow:hidden;zoom:1 http://hi.baidu.com/bbee888/item/ef80baf200de510085d27824 清除浮动的几种方法 1. 投机取巧法 ...
css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
jquery 使用animate来改变高度自动添加样式overflow:hidden的问题
Another way is to declare the element as !important in css. For example. .somediv { overflow: visibl ...
[Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css">.wrap {overflow: ...
移动端浏览器body的overflow:hidden并没有什么作用
今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...
html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
安卓手机移动端页面为body设置overflow:hidden;不起作用
动态的改变body的样式,测试了可行 var scrollTop = $("body").scrollTop();//body设置为fixed之后会飘到顶部,所以要动态计算当前用户 ...
解决IE8下body{ overflow:hidden;}无效的解决办法
css中IE8 body{ overflow:hidden;}无效的解决办法: 在页面html中使用: body{ overflow:hidden; } 在ie8下无效 ,仍然有滚动条. 解决的办法如 ...

overflow:hidden的使用

一、溢出隐藏

二、清除浮动

三、解决外边距塌陷

overflow:hidden的使用相关推荐

最新文章

热门文章