CSS浮动

多个块级元素纵向排列用标准流,横向排列用浮动

1.定义浮动float

float用于创建浮动框,浮动框可以移动到左右边缘或其他浮动框边缘.
float: 值
值可取none(默认)不浮动 left左浮动 right右浮动

2.浮动特性

• 浮动会脱离标准流(脱标),移动到指定位置,浮动的盒子不再保留原先位置
• 浮动的元素会一行显示并且元素顶部对齐,互相没有缝隙,若父类宽度装不下,多出的盒子会另起一行排序.
• 浮动的元素会具有行内块元素的特性

3.搭配标准流的父类

先用标准流的父类元素排列上下位置,内部子元素采用浮动,左右排列.
用父类盒子框住子元素的浮动范围

4.清除浮动的原因和方法

不设置父类的高,可以清除浮动,清除浮动之后父类就会根据浮动的子类元素的高自动检测高度.从而使父类有高度,这样就不会影响下面标准流的排序.

清除浮动的原理为闭合浮动

4.1额外标签法(隔墙法)

在最后一个浮动标签后新增一空块级标签,给这个空标签设置clear: both样式

这样会添加很多无意义标签,使结构性变差

4.2父类添加overflow

给父类添加overflow属性并将值设置为hidden
overflow: hidden

可能出现溢出隐藏问题

4.3:after伪元素

在样式中添加以下代码:

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* 解决IE6,7兼容性问题 */
            *zoom: 1;
        }

添加后给父类"clearfix"类名

4.4双伪元素

在样式中添加以下代码:

  .clearfix::before,
        .clearfix:after {
            content: "";
            display: block;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* 解决IE6,7兼容性问题 */
            *zoom: 1;
        }

添加后给父类"clearfix"类名