CSS 浮动与伪元素选择器

浮动 float

浮动是 CSS 布局中常用的一种技术,它可以让元素脱离文档流,并浮动到其父元素的左侧或右侧。浮动主要通过 float 属性来控制:

float 属性的可选值有:

left 使元素浮动到左侧。 right 使元素浮动到右侧。 none 默认值,元素不浮动。

示例

img {
  float: left;
}

当元素设置浮动后,它会影响周围元素的布局,使它们环绕在浮动元素的周围。为了防止这种环绕效果,可以使用 clear 属性来清除浮动。

clear 属性的可选值有:

left 清除左侧的浮动。 right 清除右侧的浮动。 both 清除两侧的浮动。

示例

div {
  clear: both;
}

在实际开发中,浮动常用于实现文字环绕图片、多列布局等效果。但使用浮动时要注意以下几点:

浮动元素会脱离文档流,不再占据原来的空间,可能导致父元素高度塌陷。浮动元素之后的元素会受到影响,需要使用 clear 属性清除浮动。浮动元素的宽度默认由内容决定,可能需要手动设置宽度。

伪元素选择器可以选择元素的某个部分,并为其设置样式。它还可以在元素的内容前后插入额外的内容。

常用的伪元素选择器有:

::before 在元素的内容之前插入内容。

p::before {
  content: 'Note ';
  font-weight: bold;
}

::after 在元素的内容之后插入内容。

p::after {
  content: '!';
}

::first-line 选择元素的第一行文本。

p::first-line {
  font-weight: bold;
  color: blue;
}

::first-letter 选择元素的第一个字母。

p::first-letter {
  font-size: 200%;
  color: red;
}

::selection 选择用户选中的文本。

p::selection {
  background-color: yellow;
  color: black;
}

伪元素为我们提供了更多选择和装饰元素的方式,可以很方便地实现一些特殊的排版和视觉效果。在实际项目中,伪元素常用于:

在标题前添加装饰性图标或编号在链接后添加外部链接图标首字下沉自定义文本选中样式清除浮动

伪元素和伪类虽然名字相似,但实际上有很大区别:

伪元素用于创建一些不在文档树中的元素,并为其添加样式。例如 ::before 和 ::after。伪类用于选择 DOM 树中已有的元素,并基于它们的状态或关系来设置样式。例如 :hover 和 :visited。

另外在语法上,伪元素使用双冒号 ::,而伪类使用单冒号 :。CSS3 为了区分伪类和伪元素,规定伪元素使用双冒号。但是为了兼容已有的伪元素写法 (如 :first-line),在一些浏览器中也可以使用单冒号来表示伪元素。

一个元素可以同时设置多个伪类,但只能设置一个伪元素。例如,一个链接可以同时处于 :hover 和 :visited 状态,但不能同时设置 ::before 和 ::after。

总之,浮动和伪元素是 CSS 中两个强大的工具,合理运用它们可以实现丰富多样的布局和视觉效果。在使用时要注意浮动清除、伪元素的浏览器兼容性等问题,确保页面能够在不同环境下正常显示。