首先看一个例子：
直接写background-image导入图片，为了看到模型，加上了border，可以看到只有一条红色的线。
background-imagedeveloper.mozilla.org
这说明里面文档流高度为零，需要手动设置高度。
增加 height: 515px;
如果背景图片想换成别的，分享一个图片网站。
Awesome Wallpapers - wallhaven.ccalpha.wallhaven.cc可以初步看到这就是文档流导致的效果。
关键一句话——div高度由其内部文档流元素的高度总和决定
关键一句话——文档流：文档流元素的流动方向要看下面很长的介绍：
下面来详细看看文档流的效果
内联元素span
增加块级元素div
可以看到每个块级元素都占一行，而内联元素都挤在一行。
有几个注意点：
1、内联元素一行占满了，会按照Z字形从左往右，然后从上往下排列：
2、内联元素的中文字体和英文字体本身的分割方式不同。
英文的最后b已经没有了，但是还是不换行，中文的文字8每个字如果一行满了都会上下按照Z字行排列分开。
如果想把英文的分开可以使用另外属性，这个属性叫做word-break。
word-breakdeveloper.mozilla.org
设置word-break:break-all；这样英文内联元素一行占满了也可以分割；
3、块级元素就算设置宽度很小，还是会占用一行。
想让一行占用多个块级元素就需要设置别的样式，有两种方式：
（1）利用display: inline-block; 不过这种方式会产生一些意想不到的bug，一般建议不要使用这种方式。
（2）推荐使用方式：使用float：
在子元素上设置——float: left;
然后在父元素上设置一个伪类——
父元素::after{content: '';
display: block;
clear: both;
}
bomber：利用float竖排变成横排笔记zhuanlan.zhihu.com如果在body上作为父元素加伪类：效果有点奇怪。
这个时候的父元素最好是包括了所有的float属性，这样可以增加一个nav来当代替body作为包括了所有的float属性。
文档内元素的流动方向介绍到这里结束。
所以body块级元素的总高度由所有内部所有元素文档流的高度决定，不是相等。
如果body里面没有元素。那么高度就是零。
总结：
1、内联元素从左往右流动；一行占用满了才会按照Z字行另起一行；
2、块级元素从上往下流动，块级元素不管宽度大小，都会占用一行；
3、块级元素的高度由内部文档流元素的总和决定的，不是相等。
最后内联元素的行高怎么确定呢，这个有点复杂，简单介绍可以参考链接：
bomber：内联元素的高度zhuanlan.zhihu.com所以回到最开始的背景图，这里就不得不设置一个高度height:515px。
但是不到万不得已请不要使用该属性来定义高度，因为块元素内部是按照内部文档流元素的高度决定了，如果设置的高度比原来要小就麻烦了。
本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
7308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
