前端CSS篇

清除浮动的方式

// 第一种

.ovh{

overflow:hidden;

}

// 第二种

.clear{

clear:both;

}

// 第三种

.clearfix:after{

　content:"";//设置内容为空

　height:0;//高度为0

　line-height:0;//行高为0

　display:block;//将文本转为块级元素

　visibility:hidden;//将元素隐藏

　clear:both//清除浮动

}

.clearfix{

　zoom:1;为了兼容IE

}

带你彻底掌握 CSS 浮动

当给父元素设置”overflow:hidden”时，实际上创建了一个超级属性BFC，此超级属性反过来决定了”height:auto”是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

BFC是什么

BFC(Block Formatting Context),块级格式化上下文,是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。

上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

float的值不为none

position的值不为static或者relative

display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

overflow的值不为visible

参考链接：

理解CSS中BFC

讲flex，手写出flex常用的属性，并且讲出作用

这个直接看 阮一峰:Flex 布局教程

介绍css3中position:sticky

单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296212562，即可免费获取，学习不怕从零开始，就怕从不开始。