float与position

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进行定位。可用作导航栏。

http://js.jirengu.com/hecumaragi/1/edit?html,css,output#