定位和浮动不得不说的那些事

相信对于很多学习web的小伙伴来说，何时用定位、何时用浮动这个问题肯定是被困扰一时的，今天就带大家来一起了解了解。在此之前第一步我们要了解什么是浮动、什么是定位。然后才能知道他们的区别和用法。
1.浮动（float）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。
2.定位（position）
定位分为4种，简单来说就是手动控制元素在包含块中的精准位置
static，静态定位（不定位）一个元素，只要position的取值不是static，认为该元素是一个定位元素
relative ： 相对定位：不会导致元素脱离文档流，只是让元素在原来位置上进行偏移，位置的变化不影响整体布局，即不脱离文档流，且 偏移的幅度较小
absolute ： 绝对定位：会让元素脱离文档流，不占据页面位置

1. 宽高设置auto，适应内容
2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块，若找不到则它的包含块为整个网页（body）
3. 脱离文档流的元素，盒子类型变成了块盒
   fixed ： 固定定位：其他情况和绝对定位完全一样。包含块：固定为视口（浏览器的可视窗口）

对于什么时候用浮动、什么时候用定位这个问题，其实也好解决。
1.能用浮动解决的问题就不要用浮动。
2.浮动解决不了的时候就用定位。
3灵活使用，不要局限于一直方法。