码迷,mamicode.com
首页 > 其他好文 > 详细

float-clear

时间:2018-08-19 18:28:04      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:漂浮   组合   理解   代表性   根据   实验   子div   div   img   

div-float-clear

div 块级元素  默认自上而下排列,也称div的标准流。

红色div1,黄色div2,蓝色div3

技术分享图片

float 漂浮,浮动。可以理解为漂浮在div标准流之上,就像photoshop中的图层一样,浮动是另外的一层。

         将div2 设置float:left;

技术分享图片

可以发现,div2飘起来了,div3占据了div2的位置,与div1重新组合成新的标准流。
将div2 设置float:right;
技术分享图片
靠近了右边缘。
若div2和div3都float:left;
技术分享图片
div2、div3设置浮动之后,div3跟随在div2之后。
在以上示例中,读者可能有一个疑惑,diV2不管怎么浮动都没跑到第一行。
我们可以总结个结论:若某个divA是浮动的,并且它的上一个divB也是浮动的,则divA在divB的后面。如果divA的上一个元素没有浮动,divA的相对垂直位置不变(上面例子div2只在第二行)

div2、div3都设置右浮动
技术分享图片
div2先贴近边缘,div3跟随在div2后面。

上面div1一直没有设置浮动方式,若把div1,div2,div3都设置左浮动。
技术分享图片
前一个元素是浮动的,则跟随前一个元素的后面,验证了上面结论的正确性。
若把div2设置浮动向右,div1和div3设置浮动向左。
技术分享图片
div3是浮动向左的,div2是浮动向右的,div3无法跟随div2,只能跟随前一个相同的float方向。
另外,当跟随的div的宽度大于剩余的的宽度,会自动另起一行。例如就上面的例子,增大div3的宽度
技术分享图片
综上所述:
(1)当divB是浮动的,并且前一个divA也是浮动的,并且divA与divB浮动方式相同,则排列方式是平行的,divA?divB
(2)当divB是浮动的,并且前一个divA也是浮动的,并且divA与divB浮动方式不相同,则排列方式是平行的,divB会向前找到和自己浮动方式相同的,并跟在其后面。
(3)当divB浮动,divA不浮动,divA和divB相对垂直位置不变,即divB只能在divA的下面。
(4)后面没有浮动的div会占据浮动div原来的位置。
(5)当跟随的div宽度>剩余宽度时,会另起一行。

清除浮动clear
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
要注意的是,clear影响的是元素本身。
例:div1,div2都float:left;
技术分享图片
在div2里面加上一个clear:left;,即清除div1浮动,让它变回标准形式, 见到标准就怂,只能跑到下一行。

技术分享图片

div1,div2都float:right;
技术分享图片
同样在div2的里面加上clear:right即清除div1浮动,让它变回标准形式,
技术分享图片
既然清除了浮动方式,div1默认的应该是靠左边的啊,但结果不是,可以看出clear清除浮动后,只能对自己产生效果,清除div1但不能改变div1的原来位置。

实际上,若举三个div为例,每个div的浮动方式有:无,left.right,三种,根据排列组合共有27种实验结果,在此我就偷个懒,找了几种有代表性的写出来,若有兴趣的可以自己试一试。

float-clear

标签:漂浮   组合   理解   代表性   根据   实验   子div   div   img   

原文地址:https://www.cnblogs.com/songzongyuan-java/p/9502024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!