码迷,mamicode.com
首页 > Web开发 > 详细

[TimLinux] CSS float和position详解

时间:2018-06-09 23:15:59      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:行内元素   lock   1.3   inux   功能   过程   1.2   定义   splay   

1. float 详解

1.1. 定义

摘自w3school:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。


注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

1.2. 关键点

从上面的定义,分析几个关键点:

  • float是可以独立存在的,与position没有关系,很多文章讲解的时候,并没有独立讲解float的功能;
  • float可以作用与替换元素(img),也可以作用以非替换元素(p, span);
  • float属性设置了之后,元素的display性质变为block了,可以设置宽度,高度,margin, padding属性等;
  • float之后,元素还在父元素内,不会脱离父元素,left值相对的是父元素的左边框(padding值有效)。

1.3. 示例

1.3.1. 行内元素示例

ttt

1.3.2. 块级元素示例

ttt

 

[TimLinux] CSS float和position详解

标签:行内元素   lock   1.3   inux   功能   过程   1.2   定义   splay   

原文地址:https://www.cnblogs.com/timlinux/p/9161616.html

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