float
特性
float元素脱离普通文档流，保持在父容器的左侧或右侧。或向左或向右触碰到其他元素将停止。普通元素将会无视float元素，但其中的inline元素与字符将会环绕在float元素旁。且float元素如与普通元素重叠将覆盖普通元素。
trouble
当需要一些元素自动向左或向右排列时float是个很好的选择。但是由于脱离普通文件流，其他普通元素以及父元素将会无视float元素。将会导致父容器崩塌，或与float元素重叠。
这时可以使用clear属性。clear属性将会使指定普通元素将float元素视作block元素一般。
- 使用clearfix类解决父容器崩塌。
.clearfix::after{
content: ' ';
display: block;
clear: both;
- 在元素声明内添加clear属性，已解决识别不到float元素的问题。
position
特性
position意思为定位。可通过某参考点实现元素的定位，分别有以下属性。
- position: relative
元素将以自身为定位的位置作为参考点，通过top/bottom/left/right属性进行定位。一般配合absolute使用，也可使用此属性做居中。 - position: absolute
生成BFC，元素将以离其最近并带有position: relative声明的祖先元素的内边作为参考点，通过top/bottom/left/right属性进行定位。可用做菜单栏弹出的选项。 - position: fixed
元素将以浏览器窗口为参考点，固定在浏览器页面上，通过top/bottom/left/right属性进行定位。可做为重要功能的按钮或广告。 - position: sticky
默认表现与relative，当浏览器页面的顶端与元素的顶端距离相差为top值时，元素固定在浏览器页面顶端。通过top进行定位。可用作导航栏。
网友评论