CSS-浮动

有很多布局效果，标准流没有办法完成，此时可以利用浮动，浮动可以改变元素标签默认的排列方式。

1.传统网页布局

标准流（普通流/文档流）：

块级元素，行内元素标签按照规定好的默认方式排列

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.浮动语法

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

（属性值往那就往那，在同行内寻找浮动框）

3.浮动特性

3.1 浮动元素会脱离标准流（脱标）

• 脱离标准普通流的控制（浮）移动到指定位置（动）
• 浮动的盒子不再保留原来的位置（飘起来了）。
• 原来的位置被标准流的盒子所占有。

3.2 浮动的元素会一行内显示 并且 元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

3.3 浮动的元素会具有行内块元素的特性

• 如果行内元素有了浮动，则不需要转换为块级元素/行内块元素怒就可以设置高度和宽度了。

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

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

网页布局一般策略：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。

（子元素飘在父级元素上，移动父元素在网页中的位置）

4.常见的网页布局

4.1浮动布局注意点

• 浮动和标准流的父盒子搭配。

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

• 一个元素浮动了，理论上其他同级（兄弟）元素也应该浮动。

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

例1：

例2：

5.标准流的父元素的高（存在不方便给父盒子高的情况）

理想状态：子元素撑开父元素，父元素自动和子元素高相同。

若不给父盒子高度（子盒子是飘在上方的不占空间，不在同一层撑不开父盒子），则下面的父盒子会冲上去。

为了解决此问题需要清除浮动

5.1清除浮动

为什么需要清除浮动

• 父级没高度
• 子盒子浮动了
• 影响下面的布局了，需要清除浮动解决问题

语法：

选择器{clear：属性值；}

5.1.1闭合浮动

清除浮动的方法

• 额外标签法也称隔墙法，是W3C推荐的作法。

相当于在父盒子边缘加一堵墙，在最后一个浮动的盒子添加一个空标签，将浮动的盒子困在父盒子中。

要求新的标签必须是块级元素

• 父级添加overflow属性

给父级添加overflow属性，属性值设置为hidden，auto或scroll。

• 父级添加after属性- :after 伪元素法

• 父级添加双伪元素

•