css position、浮动元素
这里作分析。不知何用和效果的先去w3schoolCSS 浮动去了解一下。
本文来自stackoverflow，这里做个回答的翻译。
css的position(用于定位)
position有4个取值：
1.static：代表默认值，不写就相当于设定为这个，即正常位置。
2.relative：以该元素的正常位置的左上角为坐标原点，进行偏移定位，且占用原来正常位置空间。
3.absolute：以该元素的offsetParent的padding box为坐标原点，进行偏移定位，不占用原来正常位置空间。
这里的offsetParent指满足下面2个条件之1的最近祖先元素：
(1)CSS-positioned设置为 absolute or relative or fixed（不为static即可）
(2)祖先元素是这些元素： <td>, <th>, <table>,<body>
padding box:看这里
offsetParent为null的情况：这里找
4.fixed：以浏览器窗口左上角为坐标原点，进行偏移定位，不占用原来正常位置空间。
当取值不为static时，css的left、right、top、bottom属性有效，作用效果雷同margin。且left、right同时设置时，优先级left>right（top>bottom）。
absolute和fixed均无法撑开父元素，若想使父元素包括他们，只能通过js修改父元素大小。
css的float(用于浮动)
float: left;就是position: absolute;left :XX;top: XX;，其中XX由浏览器自动计算，使得浮动元素之间不重叠。浮动元素的display属于display: inline-block;（可并行显示的block元素，或者说具有block边界、大小属性的inline元素）。
css的clear：清除浮动
浮动元素造成的影响不再说明。对某个元素设置清除浮动，就是让该元素清除浮动的影响，使后面的元素不受浮动的影响。下面假定这些元素的父元素不是浮动元素。
对某个正常元素使用clear:left;：
1.浏览器调整该元素大小使其包括浮动元素们(设置了float:left那些)，所以后面的正常元素就可以避开浮动元素不被浮动元素覆盖。（也就是后面的元素按常规来避开该元素，但该元素大小包括了的浮动元素，也就避开了浮动元素。外层的父元素也因为被该元素撑开，在包括该元素时也就包括了浮动元素）
2.该元素及子节点的文本节点布局不再受浮动元素影响。（比如此时<p>中的文本不再自动围绕浮动元素，而是被浮动元素覆盖）
对某个浮动元素使用clear:left;：
如果该浮动元素触碰到之前的浮动元素(设置了float:left那些)，那么该浮动元素往下移动使其左边没有触碰到浮动元素。（容易理解，这样操作后，后面的浮动元素不再受前面的浮动元素影响。也就是后面的浮动元素会以该浮动元素为起点，排列在其后面）
注：一个常用的撑开父元素使其包含浮动元素的方法：
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
父元素为浮动元素：
1.所有子元素都为浮动元素
2.父元素能被子浮动元素撑开
3.所有子浮动元素都被设置了清除clear: both;
