谈谈clear和overflow

Posted hopeelephant

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谈谈clear和overflow相关的知识,希望对你有一定的参考价值。

  今天来谈谈clear和overflow,大家都知道他们的中文意思,一个是清除,一个是溢出。

  先来说说clear,clear的属性值一般都是用clear:both。当然也有clear:left和clear:right,不过还是用both的好,一般不会出现什么问题,那么什么时候会用到clear:both呢,经常会在做页面的时候会发现不该浮动的元素浮动了,有的时候很无语,这个时候一般这个元素上面的元素可能设置了float浮动属性,所以后面的元素也会跟着浮动,这就很苦逼了,以为只有人会跟风,没想到网页的元素也会跟着它前面的浮动元素走,不过没有关系,将不想浮动的元素他的直接父元素设置clear:both就ok了。

  这个还是比较简单的,多解决几个这样的问题就没有什么问题了。

  接着来说一个overflow属性,一般它的属性值大多数设置的是hidden,也就是overflow:hidden,还有一种是overflow:auto,不过我一般用的几乎都是overflow:hidden,中文表面上的意思就是,溢出部分隐藏,但是用在网页的设计中还真是有点抽象,有的时候经常会遇到这样的问题,但是,大多说时候不知道怎么来用,。我来举个简单的例子

  写代码有经验的人一般是不会设置元素的高的,这样就比较容易问题的,我是不习惯设高的,我觉得设高虽说有的时候不容易出错,但是是不合理的,我是一只觉得网页是活的,一直在变得,设了高网页不会死了,那还看什么网页,没人愿意看死的网页,。

  不设高,网页布局的时候有会经常浮动,哈哈,那么问题就来了,。有的时候给父元素设置了背景颜色,会发现子元素没有了背景颜色,接着就去找代码中的错误,几百行的代码找一下午估计都找不出什么问题出来,。子元素之所以没有了背景颜色,是因为你将元素浮动了,元素一旦浮动,它的父元素就会没有了高,至于为什么一浮动,元素的父元素就没有了高,我也没有更好的解释方法,不过可以这样想,要是很高的话还怎么浮动,。所以就干脆不用高了,想想高都没有了,哪里还有什么背景颜色的存在,。大家可以在审查元素中试试,浮动的元素的父元素会失去高,但是父元素加上overflow:hidden之后高就回来了,。高度就是内容的高的,一直话总结浮动的元素其父元素会失去高度,所以就需要就父元素设置overflow:hidden,。举个例子

这个图是个简单的例子,这个简单的页面一共分为了两个部分,一部分是小朋友和文字,还有一部分是下面的按钮,这个问题上折腾了很久,按钮是设置了样式的,但是按钮的样式一直往上面跑,但是子却留在那里,简直是无语,看看一定是上面的图片和文字浮动了,浮动了那么孩子和文字的父元素就没有了高,没有了高其实就可以无视眼睛可以看到的内容了,浏览器会认为没有内容,尽管你的眼睛可以看得到,所以按钮就上去了,所以现在只需要给孩子和文字的父元素设置overflow:hidden就可以了。

  写这篇博客的时候是听莉莉安写出来的,。

  站在布达拉宫上。

以上是关于谈谈clear和overflow的主要内容,如果未能解决你的问题,请参考以下文章

css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐

谈谈常用清除浮动的方法

ByteBuffer 类的 rewind() 和 clear() 有啥区别?

ArrayList.clear() 和 ArrayList.removeAll() 有啥区别?

refresh和clear的区别

数据表 ajax.reload() 和 .clear() 不工作