一、课程概述

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个方法，学习还是少不了要多复习，继续加油！