代码改变世界

浮动

2018-09-10 15:25  冻奶香甜玉米片  阅读(174)  评论(0编辑  收藏  举报

脱标:脱离了标准文档流

标准文档流内第一个元素脱标了,然后第二个元素就会顶上第一个元素的位置成为标准文档流的第一个元素

但是因为第一个元素浮起来了,所以会遮挡第二个元素

 

一旦元素脱标了,就可以随意设置宽高,无需转换

脱标后只会在自己的行内浮动,除了前面有脱标的,他就会往上移一行,如果全部脱标,全部都在第一行,除非不够显示

 

(感觉上面的说法是块状元素的)

 

两个行内元素

如果第一个脱标,那么第二个会和其并排没空隙(代码已经换行)

如果第二个脱标,第一个没脱标,那么第二个会排到第一个前面去没空隙(代码也换行了)

如果两个都脱标,则两个并排

 

块状:

如果父元素有足够空间,那么依次排下的3个脱标元素会彼此依靠

如果空间不够,第三个元素会进而往脱标方向靠,找到某条边够空间让其贴靠,若找不到,则会贴靠body标签

 

浮动的四个特性:

脱标

元素相互贴靠(靠边)

浮动的元素有字围效果

紧凑的效果(块状元素如果没有设置宽度,设置了背景颜色,那么其背景颜色的宽度是整个屏幕宽度,如果设置了浮动,则背景颜色会自动收缩)