实验分析定位 浮动 清除浮动之间的区别与联系.docxVIP

定位 浮动 清除浮动之间的种种 因为本次实验以 HTML+div+css进行 测试，而 div 是块级元素，即默认情况下的display=block(即块级元素)；因此div 默认情况下一个div 就必须占据一行，即div旁边不得有任何其他的块级元素 注意：html 文档中，一行只能有一个块级元素 如果文档中，自然顺序写两个块级元素，则第二个块级元素会自动换行显示 测试一：单纯的浮动 自然状态下：一排n个div，放置在一个足够大的div范围 注：因为是块级元素，所以每个div按照文档中写的顺序自然向下排成一排（也就是文档流 自然流的说法） 2、n个div放在一个足够大的div内，只有第一个、第二个同时向左浮动，其他正常 规律：1 浮动的元素会飘起来，不占据原来文档流的位置，原来位置被其他正常元素占据；但是，飘的范围是父元素内 浮动起来的元素会依次向左浮动，在“空气流”同高度处依次排列 3、 n个div，前4个正方形的div全部向左浮动，最后3个正常，但是相比于上方，此处存放所有div的大容器div 水平范围较小，无法在水平位置存放全部的div 规律：1 浮动的元素会飘起来，不占据原来文档流的位置，原来位置被其他正常元素占据；但是，飘的范围是父元素内 2 浮动起来的元素会依次向左浮动，在“空气流”同高度处依次排列 3 如果设置同时向左浮动的n个元素在水平方向上无法存下，则会依次换行整体换行存放，而与父元素的距离是前面所有浮动元素中高度最大的距离， 但所有浮动的元素仍然在“空气流”同高度处依次排列 4因为之前的文档流都浮动起来不占据原来的位置，所以正常div 在文档中重新按照自然流顺序摆放 4 n个div，存放所有div的大容器div 水平范围较小，无法在水平位置存放全部的div，前4个正方形的div全部向左浮动，然后3个正常，最后一个向右浮动。 5 相比于以上，只是又加了一个，设置最后两个元素分别向左 向右浮动 6、那，如果再加2个，最后4个，其中随意2个向左，另外2个向右浮动 为此，充分体验下 规律：注意这里的最底下的数字，因为7、8、9、10分别是按照向左、向右、向左、向右浮动的，先飘的一定最靠近飘动方向的边缘 总结：假设里面没有设置position属性的所有元素，无论设置为浮动的div与其他很多的正常div按何种次序摆放； 所有设置为浮动的div在空气流同高度处按之前在文档中的自然顺序依次摆放，并且如果有方向不一致的，越先飘的越靠近相应飘动方向侧 所有正常div按照自然顺序重新组成新的自然流在该文档中依次摆放， 测试二： 绝对定位 n个正方形div, 第一个设置为绝对定位，即position=absolute;其他正常 规律： 1 设置为绝对定位的元素飘起来，到“空气流”中，因此不占正常文档流的位置 2、n个正方形div, 前2个设置为绝对定位， 规律： 1 设置为绝对定位的元素飘到“空气流”中，不占据正常文档流位置 2 在文档中处于先后位置关系设置position为绝对定位的，在“空气流”中的不同高度处，最后设置为absolute的，相对飘的较高，会覆盖下面的元素 3 正常流重新组合，占据原来的位置 3、n个正方形div， 我们仅设置第2个和第4个的position 为absolute ， 注意： 这里与浮动相同点：1 设置了float 或者设置position为absolute的div(块级元素)，都会飘到“空气流中”，不占据文档自然流位置 不同点是：1 float的所有元素默认都在“空气流”同高度处，而设置position=absolute的div（块级元素），不在同一高度，并且，最后飘的，高度大 2 这里的元素只在该位置的正上方“空气流”飘，不向左右移动位置 4、如果将上述中的第2个设置left=240px; 第四个设置left=240px;top=600px是什么意思呢 规律：可以发现，第2个和第4个在设置left=240px；后，在新的位置，距离浏览器左侧位置相同，真实的就是，这个是相对于浏览器左边的距离，(事实上，真是的情况是，这个距离是距离“自己”最近的设置了position 属性的祖先元素左侧的距离，如果是right=240px,则会距离右边界，下面可验证下)，第4个的top，在此处就是距离浏览器（此处没有哪个父元素设置了position属性）上边界的距离 5 在上方基础上，增加一个无关紧要的父类div，和一个与2、4同辈的div6，并且设置2和4为right：240Px; 而6位left：240px; 这里可以发现，2、4距离浏览器右边界240px，6距离左边界240px; 6、上方基础上，我们将父元素pink（粉色）的posit