浮动元素与元素的定位

一文档流的概念指什么？

　　文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

　　标准流的特点：1.块级元素从上到下，独占一行

　　　　　　　　　2.行内元素，行内块级元素从左到右在一行中显示。

　　　　　　　　　3.占位置。

　　使元素脱离文档流的方法有：浮动和定位。

  CSS定位方式有四种：
  默认定位（static）
  相对定位（relative）
  绝对定位（absolute）
  固定定位（fixed）

static: 默认值。没有定位，元素在正常的文档流中，top，right，bottom，left和z-index属性无效。
relative: 生成相对定位的元素，通过top，bottom，left，right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。
absolute: 生成绝对定位的元素，相对于static定位的第一个父元素进行定位。

注意:
1.绝对定位的元素已经脱离文档流，普通流中其他元素的布局就像绝对元素不存在一样；

2.绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；

3.绝对定位的框可以覆盖页面的其他元素。

fixed:本质上是一种绝对定位，不为元素预留空间。通过制定相对于屏幕视窗的位置来制定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、下方的广告，或者右边的回到顶部div。

1、浮动只限于水平方向
2、浮动元素脱离了文档流，后面的元素会上移填充它原来的空间
3、浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素
4、任何元素（包括行内元素）浮动后，都具备了块级元素的特征

1、添加一个div
<div class="clear"></div>
在<style></style>标签里添加

.clear {
    clear:both;
}both

2、添加伪元素

.box:after{
    content:'';
    display:block;
    clear:both;
}

右边的元素不受左边元素的影响
我们希望左右两边是完全独立的元素。
用BFC
BFC就是创建独立的元素单元

.box .desc{
    overflow: hidden;
}

3、用BFC解决父级高度塌陷问题
在父元素上使用overflow：hidden；转为BFC

.box{
    overflow:hidden;
}

浮动的本质是为了解决图文并排显示的问题
浮动要解决的两个问题：
1、浮动元素的高度对于他的包含块不可见
2、浮动元素可以BFC块使他不影响到后面的元素布局