css浮动元素脱标和浮动元素排序规则浮动元素贴靠现象

1、什么是浮动元素脱标?
脱标:脱离标准流
当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标

2、浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了,而后面一个元素没有浮动,那么这个时候前面一个元素就会盖住后面一个元素

3、浮动元素排序规则
3.1相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面
3.2不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动.
3.3浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定
3.4如果第一个元素是左浮动第二个元素是不浮动第三个元素是右浮动,那么第三个元素的右浮动会另起一行浮动,会在第二行的右边右浮动以此类推(个人实验出来的结果)

4、浮动元素贴靠现象
4.1如果父元素的宽度能够显示所有浮动元素那么浮动的元素会并排显示
4.2如果父元素的宽度不能够显示所有浮动元素,那么会从最后一个元素开始往前贴靠
4.3如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,236评论 1 92
  • CSS学习感言: CSS明显比HTML复杂一些,用的时间也多,而且也还有许多迷惑的地方,特别是关于定位和浮动,理解...
    雨夜月风阅读 538评论 0 1
  • 网页的布局方式 1.什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 1.标准流...
    sweetMood阅读 303评论 0 0
  • 网页布局方式——浮动流 标签(空格分隔): H5+CSS [TOC] 网页布局方式——浮动流 简介 浮动流是一种"...
    袁俊亮技术博客阅读 499评论 0 1
  • 今天晚上,我们去天逸公园玩,我们开了大概五十几分钟的车,到了天逸公园车也太多了吧。多的连一本书都放不下了,只好把...
    周瑞博阅读 351评论 0 1

友情链接更多精彩内容