谈谈clear和overflow

Posted 2020-08-18 hopeelephant

　　今天来谈谈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就可以了。

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

　　站在布达拉宫上。