时间:2021-07-01 10:21:17 帮助过:5人阅读
先从一个简单的例子说起:
.parent { width: 200px; margin: 30px auto; border: solid 5px #3498db;}[class^='child'] { opacity: 0.8;}.child-left { float: left; height: 100px; width: 120px; background: #2ecc71;}.child-right { float: right; height: 100px; width: 80px; background: #e74c3c;}
效果大概是这样:(设置透明度只是为了演示)
我们看到的效果是父元素并没有包裹住,两个 float 的子元素,并且它自身的高度为 0。
相信很多前端er都曾为此困惑不已,为什么子元素都 float 会导致父元素高度为 0?据说 clear:both 可以用来清除浮动,那为什么给父元素加上之后没有效果?google,百度一番之后找到了解药—clearfix。
.clearfix 可以说是很多前端开发者不可缺少的 补丁 。它可以用来闭合浮动,修复父元素高度坍塌的问题。
.clearfix:before,.clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { zoom: 1; /* ie 6/7 */}
用法,还是使用上面的例子
给父元素加上 clearfix 类名就搞定了。
喜欢折腾的同学肯定知道其实给父容器增加下列属性中的一个都能达到相同效果
overflow: auto;display: table;position: absolute;float: left;
背后究竟发生了什么?带着问题,继续学习几个新名词。
可能是由于 clear 属性命名的关系,我们经常只会说清除浮动,但是确切地说清除浮动对应的是 clear: left|right|both|none|inherit;而上面的例子,我们是想让浮动的元素闭合,减少浮动带来的影响,应该是属于闭合浮动的范围。
— 那些年我们一起清除过的浮动
从我接触前端开始,听到的都是文档流,文档流,但真正的称谓应该叫做普通流或常规流(英文为:normal flow )。我的理解是按照HTML标签的位置顺序把元素从上到小,从左到右逐行排版的过程。
在 css2.1 中提到的 w3c-定位方案 有三种:
>
所以浮动也会脱离普通流,但属于一种比较‘特殊’的脱离,其他内容还会围绕在浮动元素周围,这时候父元素无法感知到它的存在。
BFC 全称为 Block Formatting Context,很多人直译叫它块格式化上下文。它是CSS2.1规范定义的,是页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
下面的情况会产生新的BFC:
一个BFC包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。
BFC最显著的效果是建立一个隔离的空间,断绝空间内外元素相互的作用。当然,还有更多的特性:
看到这里,再回头想想之前的几个小问题:
为什么会坍塌? float 脱离了普通流,并且创建了新的BFC,而父元素不具备产生 BFC 的条件,所以它的高度为0。
通过了解BFC的特性我们知道,BFC会把它包含的浮动元素高度也算在里面,也就是闭合浮动。拿 overflow: auto 举例:overflow: auto 并不会闭合浮动,而是 overflow: auto 会创建一个新的BFC,避免浮动的元素侵入其他元素。
这应该算是语义理解错了,clear: both 是让两边都不能有浮动元素,清除上方元素“浮动导致高度坍塌”,所以在父元素上用是没有效果的,通常放在浮动元素的下方,同样也会引起父元素拉伸以包裹浮动元素。
个人认为类似这类问题在 BAT 面试中属于必得分题,如果答不出来,那迎娶白富美就没你什么事了。
之前一直花心思在如何快速吃成胖子上,没有静下心来沉淀,这就是基础不扎实的表现。
补充:我写文章是为了方便自己复习,总结,也是推动自己学习的主要途径,还有练习写文档的能力,最后的最后才是跟别人分享~所以不建议大家看我们的文章,遇到问题,推荐去 google,翻 w3c 文档,或其他有保证的网站。快餐一时爽,可不能贪杯!