接下来,我们介绍第一种新的清除浮动的方法,设置overflow:hidden。那它是什么意思呢?
overflow就是“溢出”的意思,hidden就是“隐藏”的意思。
1overflow:hidden;
表示“溢出隐藏”。所有溢出边框的内容,都要隐藏掉。
overflow本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。也就是overflow也可以用来清除浮动。
一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden;那么,父亲就能被儿子撑出高了。这是一个偏方。
运行结果:
可以看出,此时div没有设置高度,而且三个p标签也设置浮动,所以div的没有撑出高度。为了清除浮动,我们可以对div设置overflow:hidden;
运行效果如下: