为了账号安全,请及时绑定邮箱和手机立即绑定

关于加了浮动后,文字由底对齐变成顶对齐的疑问?

为什么原来123是底对齐,img加了浮动之后,123就跑上边变成顶对齐了,其中的原理是什么呢?

哪位大佬帮忙看下,谢谢~

https://img1.sycdn.imooc.com//5c06687a0001050011940443.jpg

加了浮动之后

https://img1.sycdn.imooc.com//5c06687c0001b55b10840488.jpg


正在回答

7 回答

我研究来研究去,觉得最让人信服的说法是设置了float的元素,会有顶部对齐的特点

0 回复 有任何疑惑可以回复我~

<html>

<head>

<title>jkba</title>


0 回复 有任何疑惑可以回复我~

今天刚看了<<css世界>>说浮动元素会生成块盒子,具体原因待查

0 回复 有任何疑惑可以回复我~

float浮动,最初的作用就是用来让文字包裹图片

如何包裹,他就如何体现

0 回复 有任何疑惑可以回复我~
#1

balabanaaana 提问者

嗯…这个我知道…只是不知道原理让我有点抓狂
2018-12-20 回复 有任何疑惑可以回复我~
#2

丨带你兜风丨 回复 balabanaaana 提问者

因为文本默认对齐就是左上角开始呀:text-align 可以去看一下 ,如果我没记错的话
2018-12-21 回复 有任何疑惑可以回复我~

它们不在一个层上可以这么理解吧

1 回复 有任何疑惑可以回复我~

把它理解成两个块状元素,一开始两个都没有浮动,相当于在一张稿纸的第一行写了一个很大的字,然后你肯定是贴着底边线写的,之后写第二个字虽然小但也是贴着底边线写的。如果你让它浮动,就想像一下两个字在两张不同的稿纸上,各自占据各自的第一行,第二章的行高自然没必要和写大字的纸的行高一样,然后你再把两张纸装订在一起就好像小字飘上去了。然而实际上他们一直都是贴着底边线写的,只是一开始在一张纸上,第一个字把第一行给撑开了的感觉,但是第二次在两张纸上就互不影响了

6 回复 有任何疑惑可以回复我~

加了浮动之后,浮动的块是一个单独的块状显示区域,就跟你在空白页面输出 “hello world”一样。而没有加浮动时,图片跟文字是并列排布,当然是跟随图片的底边缘。我是这么理解的,不知对不对

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于加了浮动后,文字由底对齐变成顶对齐的疑问?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信