好好学习，天天向上
一、浮动定义
- 浮动是一种非常重要的布局属性
- 属性名：float，漂流、浮动的意思
- 属性值：left 左浮动 、 right 右浮动
- 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
示例图：
注：中间的间隙是设置了 margin，以便于更好的观察
二、浮动的性质
Ⅰ、浮动的元素脱离标准流
- 标准文档流特点：区分行块
- 块级元素：可以设置宽高，必须独占一行
- 行内元素：不能设置宽高，可以并排一行
- 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开
Ⅱ、浮动的元素依次贴边
- 浮动属性值：left、right
- 浮动方向设置不同，进行布局时，加载位置方向不同
- 以 left 为例
- 父元素宽度足够，所有子元素会按照 HTML 书写顺序，依次向左进行贴边，父元素左边 ← 子元素 1 ← 子元素 2 ← 子元素 3 ← 子元素 4
* 示例图：
- 父元素宽度如果不够，例如不能放下一个子元素 4，那么子元素 4 在贴边时，会跳过上一个子元素 3，向更上一个子元素 2 进行贴边，如果子元素 2 后面位置不够，继续跳过子元素 2 向前面的子元素 1 进行贴边
- 如果子元素 4 在跳过子元素 3 向更前面的子元素 2 贴边时，子元素 2 的高度不高于子元素 3，子元素 2 没有延伸出一个高度的边让子元素 4 贴边，那么子元素 4 就会跳过子元素 2 向子元素 1 进行贴边
- 如果贴边的这个子元素 4 宽度小于子元素 2，子元素 2 的高度低于子元素 1和子元素 3，形成一个凹陷，子元素 4 会受前面子元素 3 高度影响，不会出现钻空现象
- 如果子元素 1 后面的距离也放不下子元素 4，子元素 4 最终会贴到父元素左边，如果子元素 4 的宽度超过了父元素，只会出现溢出现象
- 右浮动与左浮动贴边效果是一致的，只是贴边方向不同，按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边
- 案例：利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局结构
<!DOCTYPE html>
案例图：
边框效果是通过调适间距进行实现
- 注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况
贴边性质应用
- 利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：
- 上述平均分布表格效果
- 导航栏效果
- 常见的电商或企业网站布局
练习：
- 做个如图的分布
浮动的元素没有margin塌陷
浮动的元素让出标准流位置
- 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素
- 在 IE6 、 7浏览器中，会出现兼容问题
- 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作
- 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动
Ⅲ、字围现象
- 与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载
* 示例图：
Ⅳ、浮动存在的问题
①、浮动的问题1
- 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的
②、浮动的问题2
- 父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边
以上的问题需要被解决，解决方法是清除浮动带来的影响
Ⅴ、清除浮动
①、清除浮动一：height
- 给标准流的父元素强制给一个合适的高度
.示例图：
- 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边
- 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现
②、清除浮动二：clear属性
- clear，清除
- 作用：清除标签元素自身受到的前面的浮动元素的影响
- 属性值
| 属性值 | 作用 |
|---|---|
| left | 清除前面左浮动带来的影响 |
| right | 清除前面右浮动带来的影响 |
| both | 清除前面所有浮动带来的影响 |
- 给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
.示例图：
- 解决：浮动元素影响后面元素标准流位置和贴边
- 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确
③、清除浮动三：隔墙法
- 外墙法：在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear 属性
.cl {
clear: both;
}
- 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
- 问题：父元素没有高度自适应
- 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性
<④、清除浮动四：伪类
本质是使用伪类方法利用 css 代码书写一堵内墙
- 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
- :after：这个伪类表示选中的是某个标签内部的最后的位置
- 书写方法：前面必须加普通的选择器，后面连续书写伪类名称
- 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个 clearfix 的类名
.示例图：
解决了父元素高度自适应，浮动影响后面的元素位置和贴边
⑤、清除浮动五：溢出隐藏
- 小偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题
.overflow属性
- 元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏
.示例图:
- 元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度
.- 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载
- 浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边
如果父元素高度是固定的，建议使用 height 属性解决
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题
扫一扫
1511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
