浮动(概念):浮动就是使元素脱离文档流,漂浮在文档流的上方,按照指定的方式(左移、右移),直到浮动元素的外边缘碰到父级元素的左边界或右边界;

了解一下:

文档流:概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的。

脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
(脱离文档流的两种方法是:浮动、定位)

下面回归到浮动的问题:

浮动的问题之所以难理解,是因为有的时候不能清楚的将浮动元素的位置定义,而浮动实际在我们的项目中所产生的异常效果处理起来很棘手;

之前在一个视频上看到有位前辈的解释,我个人感觉很通俗,加上我个人的理解后,可以这样解释:将你自己比作文档流中的元素,你所在的地方(比如都市、黑土地、黄土地、热带雨林、海上)可以比作你所设置的background(背景–背景色、背景图片);大家在大地上行走拥有规则可以认为是按照文档流的规则排列,当产生了浮动或者定位的时候,你可以认为这一层是云层,而脱离文档流可以认为是你的哥们作死上天了,他在天上待着的时候跟你玩的规则不一样,重新排列了;

下面我会举一些例子,来示意脱离文档流时的效果:

1、正常的块级元素,未产生浮动时的效果:
css篇 -- (二)浮动
2、假设你是1,你哥们元素二产生了浮动,也就是说你哥们作死上天了,这时他在地面上的位置就空出来了,你另一个哥们子元素3现在就可以占据他的位置,但是展现在用户面前时则会显示元素2将元素三遮盖住,看不到但他实际上是存在于元素2下面的一层,即地面上,此时元素1与元素3实际上是在同一层的;与此同时,你可以看到父级元素的高度是元素1和元素3的高度和;css篇 -- (二)浮动

另一张图可能更好理解一点:这张图中元素3实际上是被元素2遮盖了一部分:css篇 -- (二)浮动

3、那么当三个元素都浮动(左浮动)时,父元素的显示:(下图中的棕色部分)
css篇 -- (二)浮动

此时,父元素的高度无法被子元素撑开,而父元素中又无其他未产生浮动的子元素,因此父元素如图中显示呈现效果;

若要改变父元素的预期呈现效果,则需要用到清除浮动,以及bfc的概念,之后会更新本篇文章将清除浮动补充完整,请持续关注;

分类:

技术点:

相关文章: