浮动导读
- 能够说出为什么需要浮动
- 能够说出浮动的排列特性
- 能够说出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)]