CSS--overflow:hidden在项目实例中使用心得分享

发布时间：2013-07-04 11:51:02 作者：佚名

大家对CSS属性中overflow:hidden并不陌生，至于它的应用，在下文中列出我在项目中，运用到此属性的例子，感兴趣的朋友可以参考下哈，希望对大家有所帮助

列出我在项目中，运用到此属性的例子：
（1）暴力清除浮动

复制代码

代码如下:

<style type="text/css">
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
</style>

复制代码

代码如下:

<div class="wrap">
<p>test of css</p>
</div>

（2）阻止边距外折叠

复制代码

代码如下:

<style type="text/css">
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
</style>
<div class="wrap">
<p>test of css</p>
</div>

（3）在IE-6，解决定义1px高的块元素

复制代码

代码如下:

<style type="text/css">
.line {height: 1px;background-color: #ccc;overflow: hidden;}
</style>
<div class="line"></div>

（4）创建两栏布局

复制代码

代码如下:

<style type="text/css">
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
</style>
<div class="left"></div>
<div class="right"></div>

Tag：css overflow:hidden

相关文章

深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
这篇文章主要介绍了深入理解CSS overflow:hidden——溢出,坍塌,清除浮动的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-03
css中position:relative和overflow:hidden之间的问题
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成
2013-09-04
IE8 css overflow:hidden不起作用
当块元素想呈现该元素内部内容不换行或者超过该元素的部分隐藏起来
2010-03-05
CSS教程:CSS让网页文字自动隐藏
网页制作Webjx文章简介：文字隐藏应用广泛，但常用的方法没有什么亲和力。文字隐藏应用广泛，但常用的方法没有什么亲和力。常用文字隐藏方法的缺陷：
2009-04-02
css中overflow:hidden失效问题的解决方法
这篇文章主要介绍了css中overflow:hidden失效问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来
2020-02-10

最新评论