文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中float怎么用

2024-04-02 19:55

关注

这篇文章主要为大家展示了“CSS中float怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中float怎么用”这篇文章吧。

浮动的基础知识

浮动有4个属性:left(左浮动)、right(右浮动)、none(不浮动)、inherit(继承)。

浮动元素的包含块是其最近的块级祖先元素。
CSS中float怎么用

浮动元素会左偏移(或右偏移),直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边界』。
CSS中float怎么用

浮动元素脱离了标准文档流,文字和行级元素会环绕该元素,块级元素则不受影响。
CSS中float怎么用

浮动一个非替换元素,必须为该元素声明一个width,否则元素的宽度趋于0。
CSS中float怎么用

浮动元素的margin(外边距)不会与其他元素的margin合并。
CSS中float怎么用
CSS中float怎么用

浮动的深入研究

浮动元素的顶边不可以高于包含块中先前产生的块级元素或行级元素的顶。

浮动元素之间不可重叠,如果水平方向没有足够的空间放置浮动元素,它将向下移动,直到有足够的空间或没有更多的浮动元素为止。

浮动元素不能溢出包含块的左、右、上边界,仅可溢出下边界。(浮动元素溢出下边界时,部分浏览器会增加包含块的高度,使浮动元素能够包含在包含块中,出现大片空白,导致浏览器兼容性问题。)

浮动元素设置负外边距时,虽然浮动元素看起来溢出了包含块,但实际并没有违反上述规则。

特殊情况,浮动元素比包含块更宽时,浮动元素会在偏移的反方向溢出。

浮动的负作用

背景不能显示

边框不能撑开

margin padding 不能正确显示

清除浮动的方法

  
  
.clear-float2{ overflow:hidden; width:100%; }   
  
  
.clear-float3{ overflow: auto; zoom: 1; }   

以上是“CSS中float怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯