css清除浮动的几种方法(常用的3个清除浮动有效方法)

 分类:div+css教程时间:2022-09-22点击:

浮动和清除是用来组织页面布局的又一柄利剑,这柄利剑的剑刃就是float和clear属性。

浮动

浮动,你看这俩字儿多形象,意思就是把元素从常规文档流中拿出来。拿出来干什么。

一是,可以实现传统出版物上那种文字绕排图片的效果。

二是,可以让原来上下堆叠的块级元素,变成左右并列,从而实现布局中的分栏。

浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。

清浮

所以,需要清除浮动,常规的清除浮动方法有下面三种:(通过一个demo来看一下具体如何清除浮动)

按常规讲述的方式,先给大家展示一下 demo 的结构和样式:

下面是这个DEMO的CSS

展示出来是下面这样的

这是一个常规的文档流,即块级元素包围着所有子元素。而且在页面中自上而下相互堆叠在一起。

现在我来让图片标题位于图片右侧,而不是像现在这样位于下方。很明显就是给图片加一个浮动,如下代码:

img{float:left}

效果变成这样了:

那么,问题就出现了,标题是跑到右边了,但是父元素不再包围浮动元素了,它只包围非浮动的元素。于是,.footer被提了上来,紧挨着前一个块级元素。显然这种效果不是我们想要的。

那么想要的效果是怎么样的呢?如下图就是:

接下来我们就来看一下有哪些方法可以达到这样的效果(清浮的方法)。

方法一,为父元素应用overflow:hidden

这个很常用,只需要在父元素上加一个属性overflow:hidden。

.parent{overflow:hidden}

注明:这个属性声明的真正用途是防止包含元素被超大内容撑大。除此之外,overflow:hidden 还有另一个作用,即它能可靠地迫使父元素包含其浮动的子元素。

方法二,浮动父元素

第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来与浏览器容器同宽。同时为了不让.footer元素不往上挤,需要加一个清浮属性clear:left。如下代码所示:

.parent{float:left;width:100%}
.footer{clear:left}

方法三,在父元素内容的末尾添加非浮动元素,可以直接在标记中,也可以通过父元素添加clearfix类来加

给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方。如下所示:

样式代码这样搞:

.clear_me{clear:left}

当然,避免多一个dom元素,可以借助伪类来实现,父元素添加一个类clearfix。设置如下代码:

这么搞也能达到我们想要的效果。

最后总结一下:

从浮动的作用说到为什么要清浮,最后重点说了清溪的三个方法,这三种方法的使用要根据实际的场景来选择,比如,不能在下拉菜单的顶级元素上应用overflow:hidden。否则作为其子元素的下拉菜单就不会显示了。总之,掌握了这三种技术之后,再碰到需要包围浮动的元素的情况。你就能够游刃有余了。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: