文档章节

清除浮动知多少呢?

溪语_8023
 溪语_8023
发布于 2016/12/01 16:04
字数 414
阅读 2
收藏 0

1、使用时清除元素本身,不影响其他元素。当页面有两个div被设置成向左浮动时,想要让第二个元素下移,

这是就要让第二个元素设置clear:left,让第二个元素左边不存在浮动元素

2、clear:both清除左右两边的元素。

它利用清除浮动来把外层的div撑开,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,

原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

三、clearfix:清除浮动

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开

①在外部div容器的内部中设置一个div的style属性为:clear:both;可以将外部div撑开,在子集清除浮动。但是这样做多了一个无关紧要的div。

②最好的解决方式就是在外层加入一个类clearfix,让其在div容器最后添加内容,

内容不显示,但仍然占据空间,清除两边的浮动,不必在html文件中写入大量无意义的空标签。

.clearfix { *zoom:1;}  这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

③overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容,从而实现了清除浮动

© 著作权归作者所有

共有 人打赏支持
溪语_8023
粉丝 0
博文 27
码字总数 17461
作品 0
杭州
私信 提问
什么叫文档流,为什么清浮动,定位的规则是什么?

文档流 做网页布局的时候,有时候会对网页元素进行浮动,按照自己的需求对网页元素进行排版,元素浮动之后会脱离文档流,造成一些小麻烦,这时候就需要清除浮动,让元素按照自己需求正常排版...

默非静语
2018/07/10
0
0
CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare
2016/12/07
0
0
可能是最全面最易懂的解析前端浮动的文章

写在最前 习惯性去谷歌翻译看了看float的解释: 其中有一句这样写的: she relaxed, floating gently in the water 瞬间浮想联翩,一个女神,轻轻地漂浮在水中。开心的拍打着水花,哇靠。。。...

flyfee
2018/10/11
0
0
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
38
0
CSS篇-CSS小技巧与注意手记(二)

一 : float/绝对定位/固定定位 可以让元素默认转换为行内块元素 元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。 只给盒子一个高度 效果 当我们...

TianTianBaby223
2018/07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式之数据库和缓存双写一致性方案解析

为什么写这篇文章? 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。 ![] 但是在更新缓存方面,对于更新...

hensemlee
18分钟前
0
0
怎么学习大数据

最近有很多人在找,大数据是怎么学?需要学什么技术以及这些技术的学习顺序是什么?今天有时间我把个问题总结成文章分享给大家。 那大数据处理技术怎么学习呢?首先我们要学习Java语言和Lin...

董黎明
18分钟前
0
0
MySQL 常用数据存储引擎区别

mysql有多种存储引擎,目前常用的是 MyISAM 和 InnoDB 这两个引擎,除了这两个引擎以为还有许多其他引擎,有官方的,也有一些公司自己研发的。这篇文章主要简单概述一下常用常见的 MySQL 引擎...

吴伟祥
20分钟前
0
0
MySQL学习笔记之三排序和过滤

在数据库的使用中排序和过滤也是经常的操作 排序检索数据,关键字order ##1.按照某个列名排序 普通排序mysql> select * from user;+----+--------+-----+-----------------------+-----+|...

凌宇之蓝
24分钟前
0
0
编译GDAL2.3.0的C#接口

编译完GDAL和JAVA接口后,如果需要使用C#调用,就需要编译C#的接口。方法如下: 注意:使用的SWIG版本不能使用太高版本,否则,会报一堆的类型未找到的错误,我是无从下手。使用swig2.0.7(据...

会哭的鳄鱼
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部