文档章节

清除浮动知多少呢?

溪语_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
杭州
私信 提问
CSS清除浮动

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

Damonare
2016/12/07
0
0
什么叫文档流,为什么清浮动,定位的规则是什么?

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

默非静语
07/10
0
0
可能是最全面最易懂的解析前端浮动的文章

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

flyfee
10/11
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

没有更多内容

加载失败,请刷新页面

加载更多

《TCP/IP详解 卷1:协议》第3章 IP:网际协议

3.1 引言 IP是TCP/IP协议族中最为核心的协议。所有的TCP、UDP、ICMP及IGMP数据都以IP数据报格式传输(见图1-4)。许多刚开始接触TCP/IP的人对IP提供不可靠、无连接的数据报传送服务感到很奇怪...

开元中国2015
刚刚
0
0
如何创建高质量的TypeScript声明文件(七) - 该做什么和不该做什么

转载 如何创建高质量的TypeScript声明文件(七) - 该做什么和不该做什么 该做什么和不该做什么 一般类型 数字,字符串,布尔值和对象 不要使用Number,String,Boolean或Object类型。 这些类型...

durban
18分钟前
1
0
(6)添加vue-cookie

#(6)添加vue-cookie 1 安装vue-cookie cnpm install --save vue-cookie 2 引入 在main.js中进行引入: import Vue from 'vue' //这句是原来就有的import VueCookie from 'vue-cookie'Vue......

neumeng
26分钟前
1
0
node安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

笑丶笑
今天
3
0
OSChina 周三乱弹 —— 夜半回家,推门不动

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @胖达panda :分享陶晶莹/张雨生的单曲《我期待》 《我期待》- 陶晶莹/张雨生 手机党少年们想听歌,请使劲儿戳(这里) @cc_z :熬夜一时爽,...

小小编辑
今天
1K
16

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部