跳到主要内容

CSS 清除浮动、边框和背景

清除浮动​

当元素应用了 float 属性后,它会脱离文档流,浮动到其父元素的左侧或右侧。这可能导致布局问题,因为浮动元素的父元素可能无法完全包裹它。为解决这个问题,我们需要使用 clear 属性来清除浮动。

方法 1 使用空的清除元素​

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

使用方法:

<div class="clearfix">
  <div style="float: left;">...</div>
  <div style="float: right;">...</div>
</div>

这种方法通过在浮动元素的父元素上添加一个伪元素,并设置 clear: both 来清除浮动。伪元素的 content 属性为空,不会显示任何内容,但仍会占据空间并清除浮动。

方法 2 使用 overflow​

.container {
  overflow: auto;
}

将父元素的 overflow 属性设置为 auto 或 hidden,会创建一个新的块格式化上下文(BFC),使父元素能够包含其浮动的子元素。这种方法简单易用,但可能会引起其他问题,如隐藏溢出内容。

方法 3 使用 Flexbox 或 Grid​

现代布局技术如 Flexbox 或 Grid 可避免浮动带来的问题,因为它们有自己的布局机制,不依赖于浮动。使用这些技术可以更轻松地创建响应式布局,而无需处理浮动的复杂性。

清除浮动使用场景​

  1. 多列布局:当有两列或多列布局,希望它们并排显示,但不希望其他元素环绕它们时。
  2. 图片与文本:当图片浮动于文本旁边,使文本环绕它,但不希望后续元素也环绕该图片时。
  3. 卡片或网格布局:使用浮动为元素创建网格或卡片布局,但希望每行都有固定数量的卡片时。

边框​

border-style​

设置边框的样式,如 solid、dotted 或 dashed。

div {
  border-style: solid;
}

border-width​

设置边框的宽度。

div {
  border-width: 2px;
}

border-color​

设置边框的颜色。

div {
  border-color: red;
}

border-radius​

为边框添加圆角。

div {
  border-radius: 10px;
}

通过组合这些属性,可以创建各种不同风格的边框。例如:

div {
  border: 2px dashed blue;
  border-radius: 5px;
}

这将创建一个 2px 宽的蓝色虚线边框,带有 5px 的圆角。

背景​

background-color​

设置元素的背景颜色。

div {
  background-color: yellow;
}

background-image​

设置元素的背景图像。

div {
  background-image: url('path_to_image.jpg');
}

background-repeat​

设置背景图像是否重复。

div {
  background-repeat: no-repeat;
}

background-position​

设置背景图像的位置。

div {
  background-position: center center;
}

background-size​

设置背景图像的尺寸。

div {
  background-size: cover;
}

这个属性可以设置为具体的宽度和高度值,如 100px 100px,也可以使用关键字如 cover 或 contain。cover 会缩放图像以完全覆盖元素,可能会裁剪部分图像;contain 会缩放图像以完全适应元素,可能会在元素内留下空白区域。

background-attachment​

设置背景图像是否随页面滚动。

div {
  background-attachment: fixed;
}

设置为 fixed 时,背景图像相对于视口固定,不会随页面滚动而移动。设置为 scroll(默认值)时,背景图像会随元素一起滚动。

复合属性​

CSS 提供了 background 复合属性,可以在一条声明中设置所有背景相关属性:

div {
  background: #ffffff url('path_to_image.jpg') no-repeat fixed center center / cover;
}

在这个例子中:

#ffffff 代表 background-color url('path_to_image.jpg') 代表 background-image
no-repeat 代表 background-repeat fixed 代表 background-attachment center center 代表 background-position / cover 代表 background-size

使用复合属性可以更简洁地编写背景样式,但也可能降低可读性。在实践中,可以根据具体情况选择使用单独的属性或复合属性。

编辑此页
最后由 sumingcheng 于 更新