float布局
# 标准流
# 概要
浏览器渲染网页时默认的排版规则
# 常见排版规则
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动换行
# 浮动
# 作用
- 图文环绕
- 网页布局：让垂直布局的盒子能够变成水平布局，如：一个左，一个右
# 特点
- 脱标，不占位置
- 覆盖标准流中的元素
- 浮动找浮动，下一个浮动会在上一个浮动左右浮动
- 浮动元素会受到上面边界的影响
- 显示效果：一行可以显示多个；可以设置宽高
提示
总结：脱覆找特，会影响
# 清除浮动
- 原因：给子元素设置浮动后不能撑开父元素（高度塌陷）
- 影响：会破坏其他元素网页中的布局
# 清除浮动的方法
- 给父元素设置高度：缺点就是新闻列表，或者推荐类模块不能设置高度
- 给父元素设置：overflow:hidden
- 额外标签法：最后一个浮动元素的后面添加一个空div，设置样式为clear：both
- 伪元素清除法
.clearfix::after {
content: '';
display: block;
clear: both;
/* 补充：为了清除after为元素 */
height: 0;
visibility: hidden;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Demo演示
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
上次更新: 2023/01/29, 11:01:00