CSS定位与浮动的基本概念
文档流与浮动
在CSS布局中，元素的定位和浮动是两个基本的概念。文档流，也称为普通流，是指浏览器按照从上到下、从左到右的顺序渲染HTML元素。这是元素默认的展示方式。而浮动则是指元素脱离了文档流的控制，移动到其父元素中指定的位置。
定位的基本类型定位允许你将一个元素框相对于他自己或者他的祖先元素甚至是浏览器窗口通过`top`、`left`、`right`、`bottom`属性进行偏移。CSS有三种基本的定位机制：普通流、浮动和绝对定位。其中，绝对定位是最常见的定位方式，它会将元素框从文档流完全删除，并相对于其包含块定位。
浮动的特性浮动最本质的功能是用来实现并排浮动。如果要浮动，并排的盒子都要设置浮动；父盒子要有足够宽度，否则盒子会掉下去。浮动的顺序贴靠特性：子盒子会按照顺序进行贴靠，如果没有足够空间，则会再寻找前一个兄弟元素。浮动元素不再区分块级元素、行内元素，已经脱离了标准文档流，一定能设置宽高，即使他是`span`或者`a`标签。
浮动与文档流的关系
浮动元素会从最后一行最左侧的空白位置开始浮动，如当前行无法容纳下自己宽度，则垂直下沉到下一行，向左或者向右碰到包含框或另一个浮动框的边框为止。由于浮动元素会脱离文档流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果。
清除浮动
当浮动子元素的父元素盒子本身具有高度，一般不会影响到下面元素排列，則不清除浮动。但当浮动子元素的父元素盒子没有高度时，而子元素浮动后脱标，继而影响到后续盒子的排列。这个时候就需要清除浮动。清除浮动的方法有两种：额外标签法，又称隔墙法；对容器div进行浮动。
以上就是CSS定位与浮动的基本概念，希望对你有所帮助。
