CSS浮动和定位

一、CSS浮动的意义

        css浮动是一种使元素脱离文档流的方法，会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

二、CSS浮动的排列特性

        浮动的盒子会脱离标准流的控制移动到指定位置，相当于向屏幕方向漂浮起来。
        浮动的盒子不在保留原先的位置，也就是说浮动盒子原先的位置可以被其它盒子占领。
        如果多个盒子都设置了浮动，它们会按照属性值一行内显示并且顶端对其排列。
        浮动的元素是相互贴靠在一起，不会有缝隙，若父级元素装不下这些浮动的盒子，多出来的盒子会另起一行对齐显示。
        任何元素都可以添加浮动，添加浮动的元素都会具有行内块元素相似的特性。若盒子没有设置宽度，默认宽度与父级元素一样，添加浮动后，其大小根据内容来决定（行内块特点）。
        浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流盒子。

三、CSS浮动带来的影响

1、由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素；若没有给父元素设置高度，那么父元素就不会在显示屏上显示。

2、浮动元素不再占用原文档流的位置，它会对后面的元素排版产生影响。

四、CSS清除浮动的方式

1、直接设置父元素高度

2、额外标签法

3、单伪元素清除法

4、双伪元素清除法

• 优点：项目中使用，直接给标签加类即可清除浮动

5、给父元素设置overflow : hidden