CSS float

CSS规定的定位机制有三种，分别是标准文档流（Normal flow）、浮动(Float)及绝对定位(Absolute position)。

     标准文档流：

     特点： 从上到下，从左到右，输出文档内容。

                 由块级元素和行级元素组成。

 

CSS包含3种基本的布局模型：Flow、Layer和Float。

   在网页中，元素有三种布局模型：

      1：流动模型（Flow）

      2：浮动模型（Float）

      3：层模型（Layer）

 

流动模型

       流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

 

   流动布局模型具有2个比较典型的特征：

 

      第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

      第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

 

浮动模型

        能够实现横向多列布局;

        使块状元素设置float之后，便不再独占一行。

     特点：元素会左移或者右移，至到触碰到容器为止；设置了float的元素，仍然处于标准文档流中。

      元素如果没有设置宽度，设置float之后，元素的宽度随内容变化而变化。该元素会影响到紧邻它后面的元素。

 

清除浮动：

   方法一：clear属性--常用：clear：both;

                    或者clear:left;或者clear:right;(意思是清除元素左侧或者右侧的浮动)

                   当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动

   方法二：同时设置width:100%(或固定宽度)+overflow:hidden;

 

    方法三：在受到浮动影响的元素之前添加空的兄弟元素，比如<br/>，但是具体实现需要做调试。不建议使用

注意：div的高度 一般不需要设置