加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > C语言 > 正文

float属性定位基础

发布时间:2020-12-15 00:15:40 所属栏目:C语言 来源:网络整理
导读:CSS的float属性,即浮动属性,也是常用的用来定位的属性,可以使一个元素脱离正常的文档流,然后被安放到它所在容器的的左端或者右端,并且可以使其他的文本和行内元素围绕它安放。 在CSS中,任何元素都可以浮动,并且不论他本身是什么元素,都会变成一个块
正常情况

  

此时示意图如下:

float_none

左浮动或右浮动

当一个元素浮动之后,它会被移出正常的文档流,向左或者向右浮动,直到所在容器的边缘,或者碰到了其他的浮动元素。

此时,id为two的div,就会脱离文档流,浮动到父元素的最左边,然后后面的div就会上来填充他本来的位置。

float_left

与float为left时的表现相似,只不过是向右浮动

float_right

常见应用

此时的效果:

float_all

可是使用这种方式来制作导航栏

float元素与行内元素

上面主要是展示了 float之后的元素在多个块元素中的位置变化,下面说一说在文本元素中或者行内元素中的表现

float之后的元素,可以使其他的文本和行内元素围绕它安放。


  

可以看到此时行内元素并不会填充到float元素之前的位置,而是围绕着它。

inline

float元素与文本元素

float之后的元素与文本元素直接的表现,和行内元素直接的表现一样,也是围绕这它;


  

Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

float_text

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

CSS的float属性,即浮动属性,也是常用的用来定位的属性,可以使一个元素脱离正常的文档流,然后被安放到它所在容器的的左端或者右端,并且可以使其他的文本和行内元素围绕它安放。

在CSS中,任何元素都可以浮动,并且不论他本身是什么元素,都会变成一个块级框。即使设置了其他的display属性值,大部分也会被计算为block,这里具体可以查看;

语法

float: none|right|left|inherit;

属性值

属性
描述