主要学习：如何让块级元素在同一行内显示
1 标准流
2 浮动 了解即可
让块级元素在一行内显示
浮动后的盒子有什么特点？
- 顶对齐
- 具备行内块特点
- 脱标（脱离标准流的控制）
例子：
两个盒子都要加浮动
例子：产品布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动 - 产品布局</title>
<style>
/* 先清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 无序列表清除项目符号 */
li {
list-style: none;
}
.product {
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.product .left {
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.product .right {
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.product .right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
/* display:inline-block; */
}
/* 找到第四个 li 和第八个 li 去掉右侧的 margin */
/* 4n：找 4 的倍数 */
.product .right li:nth-child(4n) {
margin-right: 0;
}
/*细节：如果父级宽度不够，浮动的盒子会掉下来*/
</style>
</head>
<body>
<!-- 版心居中，然后左右布局，右边是八个产品，即八个 li -->
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>运行效果：
2.1 清除浮动
2.1.1 额外标签法 了解即可
2.1.2 单伪元素法
在父元素内容的最后添加一个块级元素
2.1.3 双伪元素法（推荐）
例如：
2.1.4 overflow
overflow ：溢出隐藏
2.2 浮动 - 总结
3 Flex 布局（重点）
简单了解 Flex：
3.1 Flex - 组成
3.2 Flex布局 - 主轴与侧轴对齐方式
3.2.1 主轴对齐方式
例子
3.2.2 侧轴对齐方式
例子：
3.3 Flex - 修改主轴方向
例子：
3.4 Flex - 弹性伸缩比
例子：
3.5 Flex - 弹性换行与行对齐方式
例子：
3.6 Flex - 行对齐方式
例如：
参考链接：
70-标准流_哔哩哔哩_bilibili
71-浮动-基本使用与布局_哔哩哔哩_bilibili
72-浮动-清除浮动_哔哩哔哩_bilibili
73-浮动-总结_哔哩哔哩_bilibili
74-flex布局-体验_哔哩哔哩_bilibili
75-flex布局-组成_哔哩哔哩_bilibili
76-flex布局-主轴与侧轴对齐方式_哔哩哔哩_bilibili
77-flex布局-修改主轴方向_哔哩哔哩_bilibili
78-flex布局-弹性伸缩比_哔哩哔哩_bilibili
79-flex布局-弹性换行与行对齐方式_哔哩哔哩_bilibili