一、课程概述
1、学习课程名称：前端工程师2022版
2、章节名称：CSS3学习浮动与定位第一章至第二章（1-1 课程简介-慕课网体系课 (imooc.com)）
3、讲师名称：一阶段老师
4、课程概述：
（1）浮动的基本概念
（2）使用浮动实现网页布局
（3）BFC规范和浏览器差异
（4）清除浮动
二、内容分享
（一）浮动的基本概念
1、浮动的最本质功能：用来实现并排
三个盒子都有向左边贴靠的功能，从而实现并排
2、浮动的使用要点：①要浮动，并排的盒子都要设置浮动；②2父盒子要有足够的宽度，否则子盒子会掉下去
3、浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素
4、浮动的元素一定能设置宽高：浮动元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或a标签
5、右浮动：float:right;所有盒子都是按照顺序反着来的，因为老大优先靠右边，效果反着来，所以用的没有left多
5、使用浮动实现网页布局：左浮动和右浮动是可以并排显示的，从大到小，从外到内，可以利用浮动实现布局
注意事项：
（1）垂直显示的盒子不要设置浮动，只有并排显示的盒子才要设置浮动
（2）大盒子内部的元素可以继续使用浮动
（3）尽情使用div
（二）BFC规范
1）BFC（Box Formatting Context，块级格式化上下文）是一个盒子的稳定状态，它是页面上的一个隔离的独立容器，能使盒子具有隔离独立的效果，容器里的子元素不会影响到外面的元素，反之亦然
2）如何创建BFC（靠谱的方法是2和4）
①设置浮动：父盒子的float的值不是 none
②设置定位（必须的绝对定位）：position的值不是static 或者 relative
③设置display属性的值为 inline-block、flex、inline-flex
④overflow :hidden（简称oh）:表示溢出隐藏，溢出盒子边框的内容将会被隐藏，这个方法是非常好用的让盒子形成BFC的方法
3）BFC的其他作用
①可以取消盒子margin塌陷
②可以阻止元素被浮动元素覆盖
（三）清除浮动的方法
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响，后续元素会自动上浮，和现有元素并排
清除浮动的方法：
1）让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。最好使用overflow:hidden
2）给后面的父盒子设置 clear:both属性，clear属性表示清除浮动对自己的影响，both：表示左右浮动都清除，副作用是因为元素没有高度，所以它的margin会失效，所以此方法不怎么推荐
3）使用 ::after给元素添加最后一个子元素，并且给 ::after设置 clear:both。可设置常见类名clearfix
4）在两个父盒子之间 "隔墙"，隔一个携带 clear:both的盒子
三、学习心得
今天重新复习了浮动的相关知识点，温故而知新，重新搞懂了清除浮动的4个方法，学习还是少不了要多复习，继续加油！