html css-overflow:hidden和clear:both的区别

问题描述

overflow:hidden和clear:both的区别

刚接触css样式,希望能有大神指导,目前我只是明白两个都可以清除浮动,overflow:hidden是在父元素中使用的,clear:both则是在后面加个div标签,具体什么时候用哪一个不是很清楚。

解决方案

overflow:hidden 不能清除浮动吧,作用是超出区域则隐藏,不出现滚动条。如果当前div没有高宽限制,则随内边的容器而变化。
clear:both 就是清除浮动吧。

解决方案二:

参考:

解决方案三:

点击参考

时间: 2024-10-03 20:50:50

html css-overflow:hidden和clear:both的区别的相关文章

css ie6、ie7、ie8中overflow:hidden无效解决办法

产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决办法: 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div 后来在外层div上面加上position:rel

css中的overflow:hidden; zoom:1

如果子元素大小超过父元素的大小,那么:     overflow:hidden会隐藏掉超出的部分     overflow:auto会显示滚动条     overflow:hidden;和overflow:auto;都可以解决非IE浏览器下清除浮动的问题     zoom:1;是给ie6看的  

overflow:hidden的详细解释

  overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于"浮动"这个词到底包含什么样的含义呢?我们下面来详细的阐述一下. 这是一个常用的div写法,下面我们来书写样式.大家可以在DMX中自己做试验 #box{ width:500px; background:#000;

CSS中 Float 的 clear:both 无效的解法

CSS 对於 Float 的 clear:both 每年都会有新的写法. XD 2008.2010 年的 clear:both 写法 不过, 在今年看到此篇: Best Cross-browser CSS Clearfix solution, 跟上述那篇比对起来, 参数多增加了几个, 到底有何差异, 就不细究了~ 直接用就对了. XD CSS 的 float 使用起来蛮方便的, 但是使用完后, 那块空间就等於是消失, 所以需在下面加 clear:left / clear:right / clea

全面阐述overflow:hidden属性

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的.但是对于"浮动"这个词到底包含什么样的含义呢?我们下面来详

border-radius 应用了 transform 的子元素 overflow:hidden 失败如何解决

在一个应用了 border-radius 的圆角元素上,加上 overflow:hidden.子元素铺满.对于子元素超出圆角的部分可以被隐藏掉.形成一个圆角头像容器的结构.代码如下: HTML <div id="wrapper">     <div id="box"></div> </div> CSS #wrapper {     position: absolute;     width: 200px;     he

用CSS的float和clear创建三栏液态布局的方法

clear|css|创建 三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.  绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布

li不显示使用overflow:hidden导致Li前面点、圈等样式不见

  点评:用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候,list-style不起作用,不显示前面的点.圈等样式,在ul或li内加入样式:list-style-position: inside; 即可 实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点.圈等样式. 解决办法:在ul或li内

CSS技巧:word-wrap与word-break的区别

内容摘要:本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别. 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题,在 FF 下,长串英文会被遮