美文网首页我爱编程
关于css的float以及clear属性的理解

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

作者: xiao_afei | 来源:发表于2018-04-10 14:36 被阅读0次

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

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

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

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

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

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

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

相关文章

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

    首先是对float属性的定义有一个整体的了解,float的定义是:float 属性定义元素在哪个方向浮动。以...

  • CSS书写规范

    CSS遵循以下顺序: 布局定位属性:display / position / float / clear / vi...

  • 查漏补缺

    图文环绕和浮动 最初的CSS只是用来写文章,熟练使用float和clear两个属性来布局: float属性:指定一...

  • float的一些总结

    首先,这是我读过的关于float的最直观的教程:经验分享:CSS浮动(float,clear)通俗讲解感谢作者! ...

  • Test10

    引用文章: 那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...

  • 2021-11-08、Float页面布局

    1、案例说明: 演示float属性和clear属性的使用方法,以及利用margin属性实现块元素水平居中对齐的方法...

  • CSS Float (浮动)

    CSS浮动float 参考教程(经验分享:CSS浮动(float,clear)通俗讲解) 首先了解一下标准文档流的...

  • css定位

    CSS position属性 CSS display属性 CSS float属性 (引用:https://www...

  • CSS经常用到的东西

    一、左右布局 1.float属性实现左右布局 float属性是css中关于布局的一个关键属性,其意为将该块状区域脱...

  • 清除浮动的一些方案

    1.br标签的中clear属性: br标签中的clear属性类似于CSS中的clear属性,可以将与br标签相邻的...

网友评论

    本文标题:关于css的float以及clear属性的理解

    本文链接:https://www.haomeiwen.com/subject/zgxnhftx.html