理解CSS定位中的float

float

float属性定义元素的浮动方向，任何元素都可以设置浮动，浮动元素会生成一个块级框，无论本身是什么类型的元素。默认值none不进行浮动，属性值left元素向左浮动，属性值right元素向右浮动，inherit继承。

浮动元素的特性：

浮动流

参考例1

浮动元素会脱离正常的文档流，构成自己的浮动流。浮动流中的元素外边距不会合并，元素在一个固定容器中进行浮动时，如果当前行放不下，元素会自动到排到下一行。

包裹性

参考里2

当浮动元素作为父元素时，并且没有设置固定宽高时，父元素会包含所有浮动的后代元素

破坏性

参考例3

由于浮动元素脱离正常的文档流，所以普通流中的父元素如果没有设置宽高，则浮动元素作为子元素时会造成高度塌陷，父元素不会包裹子元素。

clear

clear属性用于清除浮动，默认值none，所有block元素和inline-block元素都可以使用该属性。属性值left清除左测浮动，属性值right清除右浮动，both清除左右浮动，inherit继承。清浮动是为了解决浮动元素的高度塌陷问题。

clear属性并不能改变已经浮动的元素，清除浮动的原理是在浮动元素元素下面添加了非浮动元素，这样父元素由于要包含非浮动元素，所以高度会从新计算

清除浮动

清除浮动的方法有两种，第一种是使用clear属性，第二种是触发BFC，常用的是使用clear属性。

触发父元素BFC：
float: left / right
position: absolute / fixed
display: inline-block / table-cell / tabl-caption / flex
overflow: hidden / scroll / auto

使用clear属性：

参考例4

.clearfix::after {
  display: table;
  content: '';
  clear:both;
}

使用伪元素的好处是不用添加额外的html代码，只需要为浮动元素的父元素添加clearfix类就可以了。