文档章节

清除浮动知多少呢?

溪语_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
码字总数 17289
作品 0
杭州
什么叫文档流,为什么清浮动,定位的规则是什么?

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

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

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

Damonare
2016/12/07
0
0
CSS篇-CSS小技巧与注意手记(二)

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

TianTianBaby223
07/18
0
0
CSS清除浮动_清除float浮动

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

单线程生物
2016/04/07
38
0
前端开发笔记(3)css基础(中)

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文...

lxq_xsyu
2016/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数字转换为字符的L受哪个参数影响

我们知道,如果想把金额带上本位币,一般加上L, 比如: select to_char(salary,'L99,9999.00') from employees; 下面显示如下: SALARY TO_CHAR(SALARY,'L99, 2900 ¥2,900.00 2500 ¥2,500.00 ...

tututu_jiang
26分钟前
2
0
shell编程(告警系统主脚本、告警系统配置文件、告警系统监控项目)

告警系统主脚本 先定义监控系统的各个目录,然后再去定义主脚本,因为是分布式的,所以需要每台机器都这样做,如果事先有创建好各个目录和各个脚本,那么就可以把这些目录和脚本copy到其他机...

蛋黄_Yolks
27分钟前
2
0
SAP HANA Backup and Recovery

SAP HANA Backup and Recovery Skip to end of metadata Created by Paul Power, last modified on Nov 23, 2017 Go to start of metadata Purpose System Privileges How to Perform a Back......

rootliu
28分钟前
2
0
JVM的持久代——何去何从?

本文会介绍一些JVM内存结构的基本概念,然后很快会讲到持久代,来看下Java SE 8发布后它究竟到哪去了。 基础知识 JVM只不过是运行在你系统上的另一个进程而已,这一切的魔法始于一个java命令...

java知识分子
45分钟前
2
0
Hive和HBase的区别

hive是文件的视图,hbase是建了索引的key-value表。 先放结论:Hbase和Hive在大数据架构中处在不同位置,Hbase主要解决实时数据查询问题,Hive主要解决数据处理和计算问题,一般是配合使用。...

飓风2000
51分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部