CSS 浮动的理解

以下都是我碰到过的疑惑,在此一一验证:
1、div1不浮动,div2左浮动,发生什么情况?
实验一

说明一个情况:浮动只是脱离其所在行,但仍然是在该行浮动。该行是普通流决定的。如上图,div1是普通流占据第一行,那么div2占据第二行,其只能在第二行浮动。

2、div1左浮动,div2不浮动,顺序是(div1,div2),发生什么情况?可以这样分析:div1在原本行中浮动起来,
这里写图片描述

说明:div1和div2重叠了,且不浮动的div2的文字被div1给挤出来了。

3、div1左浮动,div2左浮动,发生什么情况?
实验二
说明一个情况:因为两个元素都是浮动,所以div2之前没有不浮动的元素(即普通流中的元素),也可以说第一行并没有被普通流元素占据,所以div1,div2都浮动第一行。我们可以假设一种这样的情况如实验3

4、div0(100*200)不浮动,div1(100*100)左浮动,div2(100*100)左浮动,,发生什么情况?
我依据上面两个例子的可以判断是:div0占据第一行,div1和div2占据第二行。下面看实验:
这里写图片描述
说明:在普通流中的顺序是,div0,div1,div2,所以浮动的div1,div2碰到不浮动的div0就占据第二行了。

5、假设不浮动的div0 在普通流中的顺序是在div1,div2 之后即div1,div2,div0将会发生什么情况?
这里写图片描述
说明:div0的高度是div1,div2的两倍,所以可以看出div0一部分被div1挡住了。看前面的顺序,由于div1,div2的前面没有不浮动的元素,所以两者就浮动到第一行,div0是普通流中的元素,而且可以看出它就是普通流中的第一个元素,所以div0会出现在第一行。

6、这里我再假设一种情况,div0(100*200)不浮动,div1(100*100)浮动,div2(100*100)不浮动。可以这样来设想:首先不考虑浮动元素,那么div0占据第一行,div2占据第二行,此时普通流中元素考虑完了,在来考虑浮动元素,div1前面有一个不浮动的(块级)元素,所以div1占据第二行,且左浮动,会与div2重叠且会在div2上面。如果我设置div1右浮动会更明显(图三)。分析到这里,看实验图片:

这里写图片描述
图一

这里写图片描述
图二

这里写图片描述
图三

说明:图一中可以看到不浮动的div2的文字被浮动的div1给挤出来了。从图二中可以看出div2确实占据了第二行。

7、前面几种我只讨论了块级元素的情况,下面讨论内联元素(也叫行内元素如span,img,strong 等)会出现什么情况?我们经常讨论一种情况即文字环绕效果:(千万不要误会)
这里写图片描述
源代码如下:

<img src="./img/8.png" style="float: left;"/>
    <p>
    hello worldhello worldhelloworldhello worldhello worldhello worldhello 
    hello worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello world hello world
    </p>

说明:我这里有什么不正确的地方请提出,一起学习。之前我们讨论了两个块级元素(div1浮动,div2不浮动)结果是两个元素重叠,文字被挤到下面了。与上面代码是不是很相像,都是第一个元素浮动,第二个元素不浮动,唯一不同的就是一个是块级元素,一个是内联元素。但是再加了float属性之后,两个性质都成为一样了,既具有块级元素的性质(可设置宽高)又具有内联元素的性质(包裹性质)。于是我做了下面的实验代码如下:

<div style="float: left;width:55px;height: 50px;background: lawngreen;"></div>
<div >
    hello worldhello worldhelloworldhello worldhello worldhello worldhello 
    hello worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello worldhello worldhello
    worldhello worldhello worldhello worldhello world hello world
</div>

截图如下:
这里写图片描述

发现两者的效果是一样的,所以我对第二条(div1浮动100*100,div2不浮动100*100)和第六条图一中的文字别挤在下面产生了疑惑,为什么文字汇集在下面而不是被挤在右边,于是我重新做了与第二个相似的实验,只是将div2的宽度改长了一些(150*100),截图如下:

这里写图片描述

说明:可以看到,div2的文字被挤到右边了。在这里需要注意的是文字内容不能太宽了,否则又会被挤到下面去(我猜想文字内容也具有长宽,如下两段代码的长宽似乎就不同,因为我在上面的实验中将div中内容设置成下面两种方式,得到两种结果。前者图一,后者图二。这处有点没想明白。望指点)

<div class="div1">divdivdiv</div>

这里写图片描述

<div class="div2">
div
div
div
</div>

这里写图片描述

8、文档顺序是sp1(一个内联元素span,不浮动) div1(一个div左浮动),将会发生什么?

<span class="sp1">年后</span>
<div class="div1" style="width:100px;height: 100px;background: red;float: left;">
div1
</div>

这里写图片描述

说明:这里我本来没有想法的,后来我做了第9个实验,即下面的的一个实验,才有点想法的。首先看浮动的div1,因为它是要碰到普通流中的块级元素会停止,所以在该实验中,由于sp1不是块级元素,所以div1会占据第一行,此时div1具有内联元素的一些特点,sp1会与div1并排。

9、sp1,sp2,sp3,div1(浮动),div2不浮动,将会发生什么?

<span class="sp1">sp1</span>
<span class="sp2">sp2</span>
<span class="sp3">sp3</span>
<div class="div1" style="width:100px;height: 100px;background: red;float: left;">
div1
</div>
<div class="div2" style="width:100px;height: 100px;background: blue;">div2</div>

这里写图片描述

说明:此时我们还是将之前分析的方法拿过来用:先不考虑div1(浮动),只考虑sp1,sp2,sp3,div2,所以这四个在普通流中的排列是上面三个span,下面一个div,在考虑div1,此时div1在原本文档顺序中是排在第四的,但是前面没有块级元素,所以他会排在第一行最前面。

猜你喜欢

转载自blog.csdn.net/hu19921016/article/details/79219985
今日推荐