用了就懂的float定位

float布局是实际开发中用到比较多的定位方式之一，例如页面的导航栏、新闻的列表页等布局都需要用到这一个重要的css属性，这一属性的值和意义描述如下：

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

那么具体开发中除了用到float定位，还有什么定位方式？以及什么是float定位，下面就做一个使用介绍。

一、有几种定位方式？

普通文档流定位、position定位、float定位

 

二、何为文档流？

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流。例如使用display：none,position:absoult或者fixed(其中relative并没有脱离文档流，它相对位置的定位标准就是该元素在文档流中的实际位置) 以及我下面所说的float方式。

<div class="position">
    <div class="ps-relative" style="background-color: yellow;position: relative;top: 10px;left:10px;">123</div>
    <div class="ps-static" style="background-color: bisque">123</div>
</div>

relative并没有脱离文档流

 

三、float如何定位？

float(浮动模型)是一种可视化格式模型，浮动的框可以float:left 或right，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。下面就通过实际的效果演示来了解float定位。

①普通文档流布局

<div class="position" style="width:300px;
            border:4px solid #f63;">
    <div  style=" height:50px;
            width:100px;background-color: yellow;">123
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque">123
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue">123
    </div>
</div>

div元素按照普通的文档流来定位将会独占一行显示。

②第一个元素右浮动

<div class="position" style="width:300px;
            border:4px solid #f63;">
    <div  style=" height:50px;
            width:100px;background-color: yellow;float:right;">1
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque">2
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue">3
    </div>
</div>

从效果图可以看出，第一个快元素浮动到右侧以后，它的位置被第二个块顶上，自己脱离文档流，浮动到了父元素的右侧

 

③浮动第二块元素

当第二个块也在进行右浮动的时候，会紧跟在第一块元素的后面，而不会遮住已经存在右浮动的元素。

<div class="position" style="width:300px;
            border:4px solid #f63;">
    <div  style=" height:50px;
            width:100px;background-color: yellow;float:right;">1
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque;float:right;">2
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue">3
    </div>
    <div  style=" height:50px;
            width:100px;background-color: red">4
    </div>
</div>

④第一个块左浮动

<div class="position" style="width:300px;
            border:4px solid #f63;">
    <div  style=" height:50px;
            width:100px;background-color: yellow;float:left;">1
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque;">2
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue;">3
    </div>
</div>

第二个块因为覆盖了原来第一个块的位置，它将被第一个块覆盖。

⑤当所有块都右浮动时

将所有块右浮动，并在其父元素同级加上一个不同背景的块状元素，此时，所有子块都按照次序以父元素的右侧边框为起点排列起来，但是他们把父元素同级的绿快遮住了。这是因为，浮动块的父元素按照普通文档流定位，而子块脱离文档流，相对父元素浮动，且不会撑开父元素的块高，顾因为高度的原因把绿快遮住，这就需要使用下面的一个属性clear

<div class="position" style="width:300px;
            border:4px solid #f63;margin-bottom: 30px">
    <div  style=" height:50px;
            width:100px;background-color: yellow;float:right;">1
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque;float:right;">2
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue;float:right;">3
    </div>
</div>
<div style="height: 20px;width: 300px;background-color: green"></div>

 

⑥clear清除浮动

<div class="position" style="width:300px;
            border:4px solid #f63;margin-bottom: 30px">
    <div  style=" height:50px;
            width:100px;background-color: yellow;float:right;">1
    </div>
    <div  style=" height:50px;
            width:100px;background-color: bisque;float:right;">2
    </div>
    <div  style=" height:50px;
            width:100px;background-color: lightblue;float:right;">3
    </div>
    <div style="clear:both;height: 0;"></div>
</div>
<div style="height: 20px;width: 300px;background-color: green"></div>

Clear属性是和float对着干的属性，float干的，clear都可以去“销毁”float干出的成果。下面是其可能使用到的属性值。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

 

至此，float布局的问题大体上都讲了出来，但是在实际开发中会有比这些更加复杂的环境和需求，但是只要对这些基本的知识了解的足够透彻，对那些问题都是可以迎刃而解的。笔者水平有限，还望读者指出错误和不足。