文档流的概念：
文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。
运行代码如下：
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
border: 2px red solid;
}
#img1{
width: 100px;
height: 100px;
border: 2px red solid;
}
</style>
</head>
<body>
<!-- 块级元素从上到下排 -->
<div></div>
<div></div>
<div></div>
<div></div>
<!-- 行内元素从左往右排 -->
<img src="./666.jpg" id="img1">
<img src="./666.jpg" id="img1">
<img src="./666.jpg" id="img1">
</body>效果显示：
文档流的缺陷：
- 元素摆放布局非常不灵活，出现元素间高低不平，元素间底边对齐；
- 文本空格折叠；
- 元素间空隙过小
缺陷1：
<style>
#id1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<b>缺陷</b>
<img src="./666.jpg" id="id1">
</body>效果显示：
缺陷2：
<body>
<b>缺陷</b><br>
<!-- 设置了几个空格，只显示一个空格 -->
<b>缺 陷</b>
</body>效果显示：
缺陷3：
<style>
div{
width: 100px;
height: 100px;
border: 5px rebeccapurple solid;
}
#id1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<img src="./666.jpg" id="id1">
</body>效果显示：
