清理浮动常使用的几种处理方法

作者 : 开心源码 本文共971个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共67人阅读

关于清理浮动的几种处理方法

一、浮动产生起因


? ? ? 浮动的产生是由于用了float:left或者float:right或者两者都有而产生的浮动,导致样式缺失或者者不正确显示等问题。


二、浮动产生负作使用


1、背景不可以显示

? ? ?因为浮动产生,假如对父级设置了(CSS background背景)CSS背景颜色或者CSS背景图片,而父级不可以被撑开,所以导致CSS背景不可以显示。

2、边框不可以撑开

? ? ?假如父级设置了CSS边框属性(css border),因为子级里用了float属性,产生浮动,父级不可以被撑开,导致边框不可以随内容而被撑开。

3、margin padding设置值不可以正确显示

? ? ?因为浮动导致父级子级之间设置了css padding、css margin属性的值不可以正确表达。特别是上下边的padding和margin不可以正确显示。


三、CSS处理浮动,清理浮动方法?


→ 首先举个小例子(代码如下图:我自己把敲好的展现出来)

(?当子元素都设置了float属性,父元素div宽度高度不可以撑开,样式margin属性显示有问题 )

? ? → 运行结果如下图

(结果如图)

→?处理方法一:增加额外标签、应使用 clear:both;(如下图)

(注意:一般情况下不会用这一种方式来清理浮动。由于这种清理浮动的方式会添加页面的标签,造成结构的混乱.)

? ? ? → 运行结果如下图

→?处理方法二:父级div定义 overflow: auto(注意:是父级div也就是这里的 div.box)(如下图)

(如上图标注详解)

? ? ? (原理:用overflow属性来清理浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们能用hiddent和auto值来清理浮动,但切记不可以用visible值。)

? 结果父元素div宽度高度充满(结果就是方法一的结果)

→?方法三: 用伪元素:after,来清理浮动(注意:作使用于浮动元素的父亲)

? ? ?(主要推荐用这种方法清理浮动)如下图

(其中不加visibility:hidden)也能)

? 结果父元素div宽度高度充满(结果就是方法一的结果)

→ 方法四:用双伪元素清理浮动

如下图

(方法四)

(今天某朋友问我清理浮动怎样清理,由于她刚学代码不久,我就让她使用了第一种方法,今天晚上我就想到总结一下。巩固一下)

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 清理浮动常使用的几种处理方法

发表回复