2021.04.24

浮动导读

• 能够说出为什么需要浮动
• 能够说出浮动的排列特性
• 能够说出3种常见的布局方式
• 能够说出为什么需要清楚浮动
• 能够写出至少两种清楚浮动的方式
• 能够利用ps实现基本的切图
• 能够利用ps插件实现切图
• 能够完成学成在线的页面布局

一、浮动

1.1 传统网页布局的三种方式

• 标准流（普通流/文档流）
• 浮动
• 定位

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

所谓普通流，就是元素按照标签规定好的方式排列：

①块级元素独占一行，从上到下排列

②行内元素按照顺序从左到右排列，碰到父元素边缘自动换行

1.3 为什么要使用浮动

• 可以完成标准流没有办法完成的布局，利用浮动可以改变标签默认的排列方式。

• 浮动最典型的应用：让多个块级元素在一行排列

• 网页布局的第一准则：多个块级元素纵向排列找标准流、多个块级元素横向排列找浮动

1.4 什么是浮动

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

语法：选择器 {float: 属性值 }

• none：元素不浮动，默认
• left：左浮动
• right：右浮动

1.5 浮动的特性

① 脱标特性

• 脱离标准流的控制（浮）移动到指定位置（动）
• 浮动的盒子不再保留原先的位置

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

③ 浮动的元素会具有行内块怨毒饿特性

任何元素都可以浮动，不管之前是什么元素，添加浮动之后，就具有行内块元素相似的特性。

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

为了约束浮动的位置，我们网页布局一般采取的策略是：

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

二、常见的网页布局

2.1 布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5PUx95rV-1619316923165)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425094521939.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgDYXkUR-1619316923166)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425094533520.png)]

2.2 浮动布局的注意点

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

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

② 一个元素浮动了，理论上其他的兄弟元素也要浮动起来。

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他的兄弟也应该浮动，以防引起问题。

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

三、清除浮动

3.1 为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下边标准流的盒子。

3.2 清除浮动的本质

• 清除浮动的本质就是清除浮动带来的影响
• 如果父级盒子本身有高度，则不需要清楚浮动
• 清除浮动之后，父级就会根据浮动的子盒子的高度自动检测告诉，父级有了高度，就不会影响下边的标准流了。
• 语法：选择器 { clear: 属性值; }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qssaKags-1619316923167)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425095733306.png)]

3.3清除浮动的方法

① 额外标签法，也称隔墙法，（W3C推荐）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Muau0wzM-1619316923168)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425095834626.png)]

② 给父级添加overflow属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMW3N5KD-1619316923170)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425095916552.png)]

③ 父级添加:after伪元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gnx7ui8X-1619316923171)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425100011089.png)]

④ 父级添加双伪元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Fdm9E3T-1619316923172)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425100044634.png)]

3.4 清除浮动总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9fi13THO-1619316923172)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210425100058749.png)]