关于css的float以及clear属性的理解

       首先是对float属性的定义有一个整体的了解,float的定义是:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

        一个元素如果设置了float属性,则会脱离当前的普通流(即文档流),漂浮在普通流之上,具体漂浮的位置边界,与该元素的包含块以及前一个块级元素的位置有关,float之后的位置根据其值是left或是right,会与包含块的左边界或者右边界对齐(浮动元素可设置其margin值),并且不会超过上一个块级元素所占的行,同样的float元素不会重叠而是像普通流那样排列。

        其次是对clear属性定义的理解,clear的定义是:clear 属性规定元素的哪一侧不允许其他浮动元素。取值可取left,right,both,none,inherit。

        只看定义描述的话很容易产生歧义,因此我对此定义的理解是:

        1.元素的位置由html自上而下的加载,先加载的位置不会因为后面元素类型变化导致自身位置变换。        

        2.设置clear属性相当于,将该元素的左侧元素或者右侧元素在位置不变的情况下变成块级元素占据一行,设置成为clear的元素的位置根据其调整。

可能只有我能看懂。。。等日后加入demo就会好理解一点了。

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,169评论 5 15
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,743评论 0 1
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,362评论 0 5
  • 三角肌前束 1,肩部哑铃,反向,前平举-三角肌前束 2,杠铃片,前平举,两个不同重量,每组20三个,三组-前束 三...
    laoqin阅读 1,796评论 0 0

友情链接更多精彩内容