浮动

传统网页布局的三种方式

• 普通流（标准流/文档流）：块级元素、行内元素等按照默认好的方式排列
• 浮动
• 定位

为什么需要浮动

1. 如何让多个块级元素排成行
2. 如何实现两个盒子左右对齐

浮动可以改变元素标签默认的排列方式 多个块级元素纵向排列找标准流、多个块级元素横向排列找浮动

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或者另一个浮动框的边缘

浮动特性

1. 浮动元素会脱离标准流

• 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
• 浮动的盒子不再保留原先的位置，让其它的标准流占有

2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
3. 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
• 浮动的盒子中间是没有缝隙的，是紧挨着一起的
• 行内元素同理

浮动元素经常和标准流父级搭配使用

先使用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则 当父元素的盒子装不下子元素时，将最后一个盒子的右边距去掉。

浮动元素的注意点

1. 浮动和标准流的父盒子搭配

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

1. 浮动元素的父元素是否必须需要一个高度？
2. 理想中的状态，让子元素撑开父元素
3. 但是当父元素不设置高度时，子元素设置浮动后，父元素的高度显示并不是被子元素撑开，而是显示为0
4. 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

综合以上，需要清除浮动

清除浮动的本质就是清除浮动元素的影响

1. 如果父盒子本身有高度，则不需要清除浮动
2. 清除浮动以后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法： 选择器{clear:属性值}; 实际生活中几乎都是使用-> clear:both的方式

清除浮动方法

1. 父级元素添加overflow属性

给父元素添加overflow
其属性值为hidden,auto,scroll

优点：代码简单 缺点：无法显示溢出部分 2. 父级元素添加after伪元素

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

3. 父级元素添加双伪元素

.clearfix::after,.clearfix::before{
    content:'';
    display:table;
}
.clearfix::after{
    clear:both;
}
.clearfix{
    *zoom:1;//ie6、ie7
}

为什么清除浮动

• 父级没高度
• 子盒子浮动了
• 影响下面的布局了，我们就应该清除浮动