层次结构当我们写html文档的时候，我们创建的元素默认是排列在文档流中的，所以如果它们在文档流中，就会脱离文档流。我们的浮动和绝对定位，固定定位就是让元素脱离文档流Documentflow。那么先说说我们的层级结构：块级元素(block)level从下往上排列level1.背景颜色2.背景层3.border边框4.普通内容层float浮动层inline-block/inlinetextposition层级文档流的排列方式就是上面提到的inline/block/inline-block的特点。我们在使用word文档的时候，在导入图片的时候，会选择文字环绕图片的样式，这样比较好。既节省空间又更美观。因此，我们为了节省浏览器的空间，引入了浮动样式。但是，我们慢慢发现浮动样式的布局比display:inline-block更方便，因为inline-blcok解析空格和基线对齐很头疼。写一些小的demo案例可能感觉没那么大，但是写多了会发现div的嵌套也是个头疼的问题。漂浮的。它易于使用，但也会引起一些问题。因为浮动元素将有一半脱离文档流。出单据流的一半为什么说出单据流呢？我们之前谈到了层次结构。元素浮动后，我们可以理解为浮动到正常的内容Layer，为什么这么说呢？我们设置了float之后，文字会识别浮动元素，所以会导致前面元素浮动，后面元素会在前面元素下面，但是文字会留在原来的位置。block元素是你感受不到浮层的元素，而inline/inline-block是可以感受到浮层的，所以才会出现上面的现象。Floating___block-level浮动会将元素转化为块级元素，但不具有占一行、占父元素100%宽度的特点。相反，它像内联块一样被内部的内容扩展。意思是：给span标签设置float后，就可以给spannote设置宽高和上下边距padding了。浮动---问题浮动使用方便，但也带来了一些问题。前面说过，块元素感觉不到浮动元素。所以，如果父元素是块属性，就会造成Height塌陷。高度塌陷是父元素的高度原本被子元素拉长了。这时候拉伸它的子元素是浮动的，所以不会有人去拉伸父元素的高度。父元素的高度已更改。这种现象叫做高度塌陷。如何解决浮动带来的问题？1.父元素设置固定宽高浮动元素会导致高度塌陷，因为元素浮动后没有内容来展开父元素的自适应高度。那么此时如果我们给父元素设置一个固定的高度，就不会出现这种高度塌陷的现象了。2.触发bfc（borderformatcontext）的方式有很多种来触发bfc。具体使用取决于哪种方法对页面的影响最小。为父元素设置值display:inline-block可以理解为触发bfc。同时可以理解，上面提到的内联元素和内联块元素是可以感受到浮动元素的，那么如果父元素设置为内联块元素，父元素也可以感受到浮动子元素的高度，所以不会造成高度崩塌。可以设置为：table-cell，tabble-caption，设置溢出值，只要溢出值不是默认可见的，就可以启动bdc，比如scroll，auto。通常使用overflow:hidden是比较习惯的，但是也会造成一些内容被隐藏的问题。设置浮动值使子元素浮动，然后浮动父元素，使其在一个平面上。这时候你就可以感受到子元素的高度了。因此，最好将父元素的float值设置为不为none设置位置值。由于float有一半脱离了文档流，此时父元素的层级完全脱离了文档流，所以可以感受到底层的高度。（不要慌，我会在稍后介绍位置定位）。这里注意：position:static,position:relative没有脱离文档流，所以要设置成position:absolute,position:fixed,position:sticky(sticky要注意兼容性写，很多版本还没有适用，你可以去我可以用来搜索）。clearfloatingclear:bothclearfloating本质上就是换行，为什么这么说呢？当给一个元素设置了clearfloating时，这个元素会感知到前面浮动元素的高度，然后自适应地调整自己的位置。为什么margin-top有时会失败？有些人可能会发现margin-top有时会失败。其实这不是失败，是找不到匹配的对象。在实验过程中，你可能会发现，有时候无论你怎么设置margin值，这个元素都不会像山一样移动。比如下面这种情况，有兴趣的同学可以自己调试代码。代码如下，.a{width:100px;高度：100px；背景色：黄色；边框：1px纯黑色；}.b{宽度：500px；高度：500px；背景颜色：浅蓝色；/*边框:1pxsolid;*//*padding-top:10px;*//*溢出：隐藏；*//*显示：内联块；*/}.c{宽度：100px；高度：100px；背景颜色：橙色；向左飘浮;/*顶部边距:100px;*/}.d{宽度：100px；高度：100px；背景色：绿色；清除：左；边距顶部：400px；}/*.e{宽度：100px；高度：100px；}*/
