CSS中的标记类型有两大类型，【块级标记】，【行内标记】。【块级标记】：占满一整行。【行内标记】：不占满一整行。首先h1标记和div标记，是【块级标记】。如图操作，给h1标记和div标记加上边框属性可以看到，明明文字很少，可边框的宽度很长，这是因为【块级标记】默认的宽度为100%占满一整行。如图所示，明明没使用br换行标记，可h1标记的文字和div标记的文字隔开一整行显示，还是因为【块级标记】占行的效果。
span标记是【行内标记】，如图操作，在div标记中添加span标记并没有占一整行，而是跟div标记的内容一起排列，给span标记加上边框属性也可以看到边框的宽度是根据span标记的内容多少而定。由此可见【块级标记】和【行内标记】在网页中显示上的差异。
如图操作，把span标记修改为h2块级标记，如图显示，这样是否对【行内标记】和【块级标记】容易理解？
h1标记默认【块级标记】，span标记默认【行内标记】，我们可以通过设置display属性值，把h1标记设置成【行内标记】，span标记设置成【块级标记】，如图操作。虽然两种标记之间可以相互切换，但需要注意的是，【块级标记】可以包含【行内标记】和【块级标记】，而【行内标记】却不能包含【块级标记】，不然就违背了结构语义设计初衷。
【块级标记】：可以设置宽高。【行内标记】：不可以设置宽高。如图操作。
但【行内标记】可以设置行高。
第1步：让h1标记浮动，脱离【DOM结构层】，什么意思？【DOM结构层】我们已经知道内容是【从上往下排列】，当h1标记浮动后就脱离【DOM结构层】，如图所示，可以看到div标记内容往上移动了。当h1标记脱离【DOM结构层】就变成【浮动结构层】，也是【从上往下排列】。这时就有两个结构层。1问：不是说【浮动结构层】也是【从上往下排列】，那应该重叠排列才对，为什么h1标记离的远？1答：这是因为h1标记的默认外边距还在，设置成为0即可，如图所示。2问：为什么文字没重叠？2答：文字不重叠，只是宽高重叠。第2步：让div标记也脱离【DOM结构层】变成【浮动结构层】，如图所示可以看到标记内容，从左往右排列。3问：我已经明白这2个结构层的意思，可为什么浮动后这两个块级标记【占一整行的特性】竟然从左往右排列？3答：我们【假设】标记变成【浮动结构层】后可以理解成就是变成【行内标记】，但这里有个区别，DOM结构层的【行内标记】无宽高，而浮动结构层里是有宽高的，如图所示。
由于浮动特性不占一整行，哪重新占满一整行该怎么办？如图代码，可以清除浮动。
clear：both;，只是清除浮动不占满一整行的特性，但还是在浮动结构层中，如图所示添加内容的显示位置。
刚才提到说文字不重叠，如图所示验证下，发现验证正确文字是不重叠的，所以可以推断出【浮动】只是对标记的【宽高】和【标记的位置】进行操作。
刚才提到【浮动结构层】从上往下排列，只是对当前位置。意思不是说网页中顶部从上往下排列，刚才都是左浮动，也有右浮动，如图操作。很多人把DOM结构比喻成树结构，那么也可以把浮动比喻成把树的一根树枝施了魔法，让它漂浮起来，这时下面的树枝就会往上重叠，但只是边框重叠，内容不重叠。
gif动态图将重复播放。 按住Ctrl键+鼠标滚动滑轮可以放大网页更清晰查看gif动态图。