进一步理解CSS浮动与清除浮动
本文主要探讨两个问题:
- 为什么CSS设置浮动会引起父元素塌陷
- 为什么设置
clear:both
能清除浮动,并撑开父元素。
起因
CSS的浮动,算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话,只能说“知其然而不知其所以然”。虽然很多人都说浮动会用就行,但是要想成为一个优秀的前端,对这些常用属性得知根知底。
恰巧在慕课网,张鑫旭老师开了《CSS深入理解之float浮动》这门课。链接在文末,有兴趣的可以听听,老师讲课风格很风趣……
Float的历史
Float设计的初衷,是为了实现文字环绕效果。就像下图展示的一样(图片源于w3school):
嗯,就这么简单。
Float引起的父元素高度塌陷BUG?
在这儿,我们用一个例子来说明子元素设置浮动,从而引起父元素高度塌陷的问题。
首先写一个div,里面插入一张图片。
<div id="div"><img src="./source/head.jpg">
</div>
我们再给div设置一个border,为了让大家看的清楚。
CSS设置如下:
#div {border: 5px solid red;width: 600px;
}
最后效果是这样的:
通过chrome控制台,可以看到此时div的高度为464px。
接下来,我们给那张图片添加浮动效果。
#div img{float: left;
}
再看网页,发现父元素已经塌陷了,之前的边框也消失不见了,成为一条线了。
此时再去控制台查看div的高度,高度为0px。
不,不是BUG
很多人把这个现象称为浮动带来的BUG。但从一开始Float的用途来思考:
“Float设计的初衷,是为了实现文字环绕效果。”
那么,在那远古蛮荒的互联网时代,要如何实现文字环绕图片的效果呢?机智的程序员加入了Float属性,也引入了子元素浮动,父元素高度塌陷的特性。
看到这句话的时候,我思考了很久。因为无法理解父元素高度塌陷为何能让文字环绕图片。于是把视频来来回回看了十多遍,又手写了个demo,总算理解了。
总结来说,核心要点在于一句话:
“浮动元素会脱离文档流。”
至于文档流是啥,我这儿就不介绍了。但浮动的元素脱离了文档流,所以是不计算高度的。
在此,我们加入一段话,看看div的高度。
从图中可以看出,div因为段落的加入,高度被撑开了。
所以子元素浮动引起父元素高度塌陷的原因如下:
因为没有预先设置div高度,所以div高度由其包含的子元素高度决定。而浮动脱离文档流,所以图片并不会被计算高度。此时的div中,相当于div中子元素高度为0,所以发生了父元素高度塌陷现象。
文字环绕效果的实现
那么,文字环绕效果是如何实现的?
其实讲起来也很简单,因为父元素高度塌陷,所以文字会按正常顺序排列,无视图片高度。而图片宽带又还在,所以实现了文字环绕效果。
清除浮动
介绍完浮动,自然要介绍清除浮动。在此,我们不具体的去探讨各种清除浮动的方式。而是去探讨,为何设置clear:both
能清除浮动,并撑开父元素。
clear:both的作用
clear:both的作用,对各位来说可以算是耳熟能详了。至于clear的left,right等属性,我们这儿就不一一列举了。
<div style="clear: both;"></div>
在父元素内的底部,加入这一行代码。看图易知,父元素因为子元素设置浮动而高度塌陷的问题,已经被解决了。
然后如果只是会用clear:both
,又怎么能满足我的求知欲呢?相比与这行代码产生的作用,我更关心为什么这行代码能清除浮动。
对此,我继续翻阅文档。
在w3school中,clear的定义如下:
“clear 属性规定元素的哪一侧不允许其他浮动元素。”
当然,这样看,还是很难理解为什么clear能清除浮动并撑开父元素高度。那我们举个栗子!
当先声明一个元素A向左浮动时,由于脱离文档流,这个元素的右边就会空出一片空间,空间的长宽与浮动元素长宽相同。
然后我们再声明另外一个元素B,如果元素A右侧空出的空间内,还能放下元素B的话,那么元素B就会自动补上去。
下面我写一个demo,应该就很好理解了。
HTML部分如下:
<div id="div"><div id="a"><p>I'm divA</p> //此处用p</div><div id="b"><span>I'm divB</span> //用span,防止两个都是p,不能展现父元素塌陷效果。</div>
</div>
CSS部分如下:
#div {border:5px solid red;width:400px;
}
#a {background:rgba(149, 149, 149, 0.42); // 为了方便演示,A的背景色设置成半透明。width:200px;float: left;
}
#b {background: #6EEBC1;width:300px;
}
效果图长这样:
从图上可以看到,元素B的一部分是在元素A空出的空间内的。并且I'm divB这句话在元素A的右侧。且父元素高度塌陷,父元素现在的高度就是元素B的高度。
那么如果元素A右侧空出的空间内,放不下元素B呢?
我们把元素B宽度调整为200px。
可以看出,元素B就自成一行了。
给元素B加入clear:both
后,元素B将忽略左边浮动所产生的空间,不去补空缺。
如图所示,元素B会另起一行。而不是缩到浮动产生的空间内。
撑开父元素空间的奥秘
在w3school中,clear的定义中还有这么一句话:
“在 CSS2.1 中,会在设置清除浮动的元素上外边距之上增加清除空间,而外边距本身并不改变。”
也就是说,因为浮动而产生的空白空间,会被填充为实际存在的空间。。那么,自然就能撑开父元素。
总结
总结下来,浮动与清除浮动的顺序关系如下:
- 设置元素A浮动,元素脱离文档流,不计算高度。父元素出现高度塌陷。
- 浮动元素A产生空白空间。空间长宽等于元素A的长宽。后面元素会自动补空缺。
- 给浮动元素之后的元素B设置
clear:both
,元素B将不去补空缺。 - 元素B不仅不补空缺,还会把元素A因浮动而产生的空白空间填充为实际空间。
- 实际空间被计算高度,父元素被撑开。
这 么一番走下来,花了很多时间去思考,去写demo。但对CSS浮动的理解也加深了。浮动为何引起父元素塌陷和清除浮动为何能撑开父元素这两个问 题,一直是我的盲点。所以这次寒假,集中了两天时间去攻克它(除夕和正月初一,大过年的写代码,感觉有点怪但效率却出奇的高……)。
参考链接:
《CSS深入理解之float浮动》-- 张鑫旭(也是课程地址)
CSS clear 属性
clear:both 为什么不起作用?--知乎,田雅文的回答
前端路漫漫,且行且歌。
最后附上本人博客地址和原文链接,希望能与各位多多交流。
Lxxyx的前端乐园
原文链接:寒假前端学习(8)——理解CSS浮动与清除浮动
本文转自:进一步理解CSS浮动与清除浮动
进一步理解CSS浮动与清除浮动相关推荐
- CSS浮动与清除浮动
CSS浮动与清除浮动( 本文以div元素布局为例.) 前言:由于CSS内容比较多,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 首先要知道,div是块级 ...
- html div元素浮动,CSS实现元素浮动和清除浮动的方法
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理 之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...
- 【CSS学习(三)盒子模型、边距重叠 浮动、清除浮动】
盒子模型 盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
- 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
- CSS基础之清除浮动
CSS基础之清除浮动 本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
- css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
最新文章
- datasnap發布
- linux http 配置文件,Linux http配置文件解析
- python现在第几版-2020 年10月编程语言排行榜,Python 排名逼近第二
- 008_setting指令
- 牛顿迭代法(Newton's Method)
- php use,php use和include区别总结
- 【Java报错】Greenplum数据库报错 could not determine data type of parameter $2. 问题解决(踩坑分享)
- spring mvc ajax 400解决
- nacos初探--作为配置中心
- python求最小值不能使用min和sotred_Python随手笔记第一篇(2)之初识列表和元组...
- python命令行进入帮助模式_Python 命令行之旅:深入 click 之选项篇
- [转载] Python time sleep()方法如何使用?
- 今晚的比赛(2011.12.4)
- Mac 移动端http、https抓包之Charles
- VM9.0链接+汉化包+序列号
- 基于PSCAD输电线路潮流计算
- 开发板连接了有线路由器,然后咋的就能通到外网了(udhcp)
- Android5.1下拉状态栏新增截屏功能
- 前端页面生成神器以及后端变量命名神器
- MU计算机里代表什么,计算器上M+、M-、MU、GT等分别代表意思-mu代表啥
热门文章
- 字符串处理 —— 回文串相关 —— Manacher 算法
- 编辑距离(信息学奥赛一本通-T1276)
- 整数的个数(信息学奥赛一本通-T1067)
- 信息学奥赛C++语言:求平均分
- 6 PP配置-生产主数据-工作中心相关-工作中心标准值参数
- 编译安装python3.6_编译安装Python3.6及以上
- python爬虫程序的流程图_Python即时网络爬虫项目: 内容提取器的定义(Python2.7版本)...
- 笨方法“学习python笔记之random
- 笨方法“学习python笔记之打印及注释
- ubuntu 20.04 下安装使用clash for windows