css(八)：css的float属性，浮动布局、position属性

一、明白什么是文档流

所谓文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

脱离文档流：也就是说将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流；

folat：就想到于浮起来，原来元素本身的占位就空出来让给下一个元素顶上去；相当于多层次了；

截图举例：

效果截图：

设置浮动后：

效果截图：

二、清除浮动

在非IE浏览器（如Firefox）下，当容器的高度为auto,且容器的内容中有浮动（float为left或right）的元素；在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外而影响（甚至破坏）布局的现象。这个现象叫浮动溢出。为了防止这个现象的出现而进行的css处理，就叫css清除浮动。

clear语法：

clear：none | left | right | both

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right：不允许右边有浮动对象

both：不允许有浮动对象。

但是需要注意的是，clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

举例截图：

效果截图，与最上面对比：

三、position属性

1.relative：相对定位；相对定位是相对于该元素在文档流中的原始的位置，即以自己原始位置作为参照物。值得注意的是，即使设置了元素的相对定位及偏移值，元素还是占有原来的位置，即：后面的元素不会顶上去。即，对象遵循正常文档流；但语句top、right、bootom、left等属性值在正常文档流中偏移位置；而其层叠通过z-index属性定义；

2.absolute：设置为绝对定位的元素框从文档流中删除，即：脱离文档流，后面的元素就会顶上来显示；本元素会相对于最近的已定位祖先元素定位，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

重点：如果父级设置了position属性，例如position：relative，那么子元素就会以父级的左上角为原始点进行定位。一般可以这样使用，就是将父元素设置定位position：relative，后面的子元素就使用position：absolute，然后，top、right、bootom、left

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可；

3.fixed：元素对象正常脱离文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

注意：一个元素设置了position:absolute |fixed，则不能设置float。因为这两个时不同的流，一个是浮动流，一个是定位流；relative却可以。因为它原本所占的空间仍然占据文档流。