float的运用

浮动（float）

一、定位概述

     定位：元素应该出现在网页中的哪个位置处

二、分类

• 普通流定位
• 浮动定位
• 相对定位
• 绝对定位
• 固定定位

1、普通流定位

    又称为 文档流定位

    每个块级：占用一行的空间，并且上下排列

    每个行内：从左到右排列，不单独占一行

 2、浮动定位

     浮动 & 特点？

     会将元素排除在文档流之外-脱离文档流

     元素不占据页面空间

     其余在文档流中的元素要上前补位

     浮动元素会停靠在父元素的左边或右边，或者停靠在已经浮动起来的元素的边缘上

 三、处理问题(作用)

       让块级元素在一行内显示

       属性：float

       取值： 1、none  (默认值，即没有浮动效果)

                  2、left     ( 左浮动)

                  3、right   ( 右浮动)

                  4、特殊处理

                            a) ，如果父元素的宽度已经装不下所有的已浮动子元素，那么最后一个将会换行

                            b) ，浮动元素如果不设置宽度的话，那么元素的宽度将自适应

                            c) ，所有的元素浮动起来都将变成块级元素

                                     块级元素：允许修改 尺寸

                             d) ，浮动元素 对 文字、行内元素、行内块元素的影响

 四、清除浮动

      属性：clear

      作用：清除左右两端浮动元素给当前元素带来的影响

      取值：

               1、left    

               清除当前元素左边的浮动元素带来的影响

               2、right

               清除当前元素右边的浮动元素带来的影响

              3、both

              默认，不清除

五、消除浮动元素对父元素高度所带来的影响方法

     1、父元素浮动

     2、设置父元素的高度

     3、设置父元素overflow值为auto或 hidden

     4、父元素中，追加一个空的块级子元素，并且设置其clear属性为both