这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
一、浮动float的语义化作用
浮动是网页曾经纵横一时的布局方法，而近虽然大势已去，但在布局中也是绝好的一类方式，实现类似word下文字环绕效果，如图1-1
图1-1
二、抗浮动clear（清除浮动）
清除浮动float所造成的影响
写法1：
.clear{
overflow:auto;
zoom:1;
}
写法2：
.clear{*zoom:1}
.clear::after{
display:block;
content:'';
clear:both;
}
注：类似写法2的有很多种，在此不一一列举
三、overflow:hidden抗浮动
类似overflow:hideen;抗浮动的还有
display:table; 可能会产生一些问题
overflow:scroll; 可能会显示滚动条
float:left; 可能会把元素置于容器的左边，其他元素环绕着它
overflow:hidden; 可能会裁剪溢出的元素
原理：触发BFC盒子，BFC盒子如图3-1
图3-1
BFC盒子官方解释：在BFC中，每个盒子的左外边框紧挨着包含块的做边框（从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄
个人理解：overflow:hidden作用为裁切隐藏掉超出的部分，如果float不占普通流位置，那么普通流的包含快要根据内容高度裁切隐藏。如果高度未设置，即高度未默认值auto，那么不计算内部浮动元素高度就裁切就很可能裁掉float，属于反布局常识。 所以在没有明确高度的时候，就会需要计算全部高度才能确定裁切的位置，此时，浮动的高度就要被计算进去，与此同时达到清理浮动的目标。
四、什么时候用float？什么时候用clear？clear该用什么方式？
建议需要制作如文字环绕效果时使用float，布局上需要同一行布局时采用行内元素进行布局，不得不使用float时，根据实际情况，用完后立即使用clear清除浮动带来的影响。
clear的方式并无固定方式，不用的书写习惯仅仅是使用在哪里的区别，基本保证在浮动后添加clear就行。
