浮动

 

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动其父元素中指定位置的过程

语法格式

Float:属性值（left right  none）

Display：inline-block 将块元素转换为行内块元素，可以放在一行上，有宽度和高度，但是这种布局方式，每个盒子直接有空隙，几乎是不可能去掉的。

浮动特性

浮动脱离标准流，不占位置，浮动元素总是找离它最近的父元素对齐，但不会超出内边距的范围

以下布局中，现有父元素，再添加浮动的子元素

 

浮动的元素排列位置，跟上一个元素有关系，如果上一个元素浮动，则A元素顶部会和上一个元素的顶部对齐，如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐，由此可见，一个父盒子里面的子盒子，其中一个子盒子有浮动，其他子盒子都需要浮动，这样才能一行对齐显示

 

元素添加浮动以后，元素会具有行内块元素的特性，元素的大小完全取决于定义的大小活着默认的内容多少

浮动根据元素书写的位置来显示相应的浮动

浮动的目的：为了让多个块级元素同一行显示

 

清除浮动的方法

a   在CSS中，clear属性用于清楚浮动，语法格式 选择器{clear：属性值}

     clear属性取值：left right  both ,一般使用both

b   额外标签法

                 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签。例如

        <div style=”clear:both”></div>

                 优点：通俗易懂，书写方便

                 缺点：添加许多无意义的标签，结构化较差

 

c   父级添加overflow属性方法

        可以通过触发BFC的方式，可以实现清楚浮动的效果

        可以给父级添加：overflow：hidden|auto|scroll都可以实现

        优点：代码简洁

        缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

d  使用after伪元素清除浮动

        ：after方式为空元素的升级版，好处是不用单独添加标签

使用方法：

优点：符合 浮动思想，结构语义化正确

                 缺点：由于IE6 7不支持after，使用zoom：1触发haslayout

                 代表网站：百度 淘宝  网易等

e   使用before和after双伪元素清除浮动

 

 

优点：代码更简洁

                 缺点：由于IE 6 7不支持after，使用*zoom：1触发haslayout

                 代表网站：小米  腾讯等