发布网友 发布时间:2022-04-28 12:59
共2个回答
懂视网 时间:2022-04-28 17:20
本篇文章给大家介绍一下css中overflow:hidden属性清除浮动的方法,有需要的朋友可以参考一下。我们在上一篇文章中介绍了css中overflow:hidden内容溢出隐藏的效果,接下来的这篇文章我们就来看看css中overflow:hidden属性如何实现清除浮动。
首先我们要知道清除浮动,指的是让父元素可以检测到浮动元素的高度,从而撑起父元素,即解决高度塌陷问题,父元素有了自己的高度,从而避免父元素后面的元素向前补位;清除浮动,解决的是对父元素后面同级元素排版的影响,而子元素后面同级元素排版依然向前补位。
下面我们就来看一个具体的示例
<html> <head> <style type="text/css"> .parent{ width:300px; background:lightblue; border:1px solid; } .child1{ width:100px; height:100px; background:pink; float:left; } .child2{ width:200px; height:50px; background:red; } </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> </div> </body> </html>
效果如下:
上述代码中我们没有给parent设置高度,默认高度是auto,但是parent确显示出了高度,又因为我们给child1设置了浮动,脱离了文档流,所以parent中只有child2这一个文档流元素,因此parent被撑开的高度和child2一样,我们现在给parent设置一个overflow:hidden属性,效果又会变成怎样呢?下面我们来看具体的代码
<html> <head> <style type="text/css"> .parent{ width:300px; background:lightblue; border:1px solid; overflow: hidden; } .child1{ width:100px; height:100px; background:pink; float:left; } .child2{ width:200px; height:50px; background:red; } </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> </div> </body> </html>
效果如下:
从上述的效果图中我们可以看到,给父元素添加一句"overflow:hidden",就能让父元素包住这个脱离了文档流的浮动元素,换句话说,"overflow:hidden"可以清除包含块内子元素的浮动的影响。
本篇文章到这里就全部结束了,更多精彩内容大家可以关注Gxlcms相关教程栏目!!!
热心网友 时间:2022-04-28 14:28
CSS中overflow:hidden的作用是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏,具体应用如下:
一、隐藏溢出的部分。
比如一个父块级元素里面包含了子块级元素,当子块级元素的高度超过父块级元素的高时,超部分就会隐藏。
二、清除浮动。
它的功能和clear:both是一个作用,父元素中加了overflow:hidden,子元素的浮动效果就会被清除。
CSS(层叠样式表)的特点
1、丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。