锐客网

  1. 首页 > 睿知 > it技术 > >

6、float、伪类、伪元素

float: left | right

  • float元素会根据父元素padding的内边界进行定位。
    1.遇到float元素会停止；
    2.遇到非块级元素时，会浮动到非块级的最左边或最右边;
    3.float元素无法针对块级元素浮动。
    • 如果float元素前面有block元素，则会另起一行进行浮动。
    • 如果后面有block元素，则会遮盖block元素。
    • 如果后面是定位元素，定位元素会遮盖float元素。
  • 除了display:flex以外的所有元素设置了float后，display属性将会失效，float元素可以设置宽高。
  • float除了对定位元素relative生效以外，其他定位元素均不生效。
  • 使用伪类、伪元素可以清除浮动。如下：
    必须设置为display:block。inline和inline-block属于行内，所以无法清除浮动。
div::after, ul::after{ content: ""; display: block; clear: both; }

:before ::before
  • 默认为inline元素 无法设置宽高
  • 区别：前者伪类，后者伪元素。由于历史原因，两者的效果都等同于伪元素。建议使用::。
  • after同上。
  • attr(name) 获取属性值 如下：
span::before{ content: attr(ji); }bbb// nihaobbb

    推荐阅读


    上一篇：育儿要多观察多思考

    下一篇：赞美的力量