和朋友聊天,聊到了浮动float,当时桌上有三样大小不同的物体,朋友绘声绘色的讲述了如果这三个物体中前两个设置了float,会是怎样的结果,收获不少,做做笔记。
1、假如有一个块级元素div B是浮动的,首先看上一个元素有没有设置浮动,若没有设置浮动,也就是B的上一个元素处于文档流中,则B相对于原垂直位置不变,且B的顶部总是和上一个元素对齐;若B的上一个元素也设置了浮动,则B元素会跟随在上一个元素的后边(如果一行放不下这两个元素,则B元素会被挤到下一行)。若B元素后面跟随着处于文档流中的元素C,则C的顶部与上一个处于文档流Z中的元素的底部对齐,元素B脱离文档流浮动在C上面。
2、清除浮动可以理解为打破了横向排列,只能影响要清除浮动的元素本身,不能影响需要清除浮动元素四周的元素。也就是说需要清除哪个元素的浮动就给哪个元素设置clear属性(clear:none|left|right|both)。
3、div的顺序是HTML代码中div的顺序决定的。
4、靠近页面边缘的一端是前,远离页面边缘的一端是后。