【HTML5】浮动

一、流的概念

文档流是相对于盒子模型讲的
1.脱离标准文本流的影响:破坏了布局,导致布局错乱
2.不脱离文本流
文本流是相对于文字段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在
它身下布局。但是文字却会认同浮动元素所占据的区域, 围绕它布局,也就是没有脱出文本流。

二、浮动

浮动的本质:用来实现并排的效果
浮动使用的要点:要浮动,并排的盒子都实现浮动
父盒子要有足够的宽度,否则子盒子会掉下去
clearfix clear 清除浮动

三、浮动的顺序贴靠特性

子盒子会按顺序进行贴靠,如果没有足够的空间,则会寻找前一个兄弟元素

四、浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档,一律能够设置宽度和高度,即使他
是a标签或span标签

五、使用浮动的注意事项

垂直显示的盒子,不要设置浮动、只有并排显示的盒子才要设置浮动
“大盒子带着小盒子跑”,一个大盒子中、又是一个小天地,内部可以继续使用浮动
div是免费的,不要节约盒子

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值