简述display属性的作用

`display` 属性用于设置 HTML 元素的显示方式。它可以控制元素是以何种方式显示，例如作为块级元素、行内元素、表格单元格等等。常见的取值包括：

- `block`：将元素显示为块级元素，即独占一行，可设置宽度和高度；
- `inline`：将元素显示为行内元素，即与其他行内元素共享一行，不可设置宽度和高度；
- `inline-block`：将元素显示为行内块级元素，即与其他行内元素共享一行，可设置宽度和高度；
- `none`：将元素隐藏，不占据文档流中的位置和空间。

除此之外，还有一些其他的取值，如 `table`、`table-cell`、`flex` 等，可以根据需要进行选择。通过设置 `display` 属性，我们可以灵活地控制页面布局和元素的显示效果。

相关问题

简述标签的浮动属性设置和清除。

在HTML中，浮动属性主要用于控制元素如何围绕其周围的其他元素布局。主要有两个主要的浮动值：`float:left;` 和 `float:right;`。

1. **设置浮动**:
- `float:left;`: 当应用这个属性给元素时，它会左对齐并尽可能靠近容器的左边，同时允许右侧的元素挤到它的上方。
- `float:right;`: 类似地，右浮动会使元素右对齐，并尽可能靠近容器的右边。

2. **清除浮动**:
- 直接的清除浮动通常通过CSS的`clear`属性来完成。对于包含浮动元素的父元素，可以设置`clear:both;` 或者 `clear:left` (仅清除左侧浮动) 或 `clear:right` (仅清除右侧浮动) 来消除父元素顶部的空白区域。
- 另一种常见方法是使用`clearfix`技术，即在父元素内部添加一个空的`<div>`，设置其样式为`overflow:hidden;`或`display:block; clear:both;`来清除浮动。

/* 清除浮动示例 */
.parent {
  overflow: auto;
  /* 或者 */
  display: flex; /* 如果是Flexbox布局 */
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

简述flex布局的概念

Flexbox布局是一种现代CSS弹性盒模型，用于创建响应式、动态和可伸缩的用户界面布局。它允许开发者轻松地处理元素在容器内的排列、对齐和尺寸调整，无论屏幕大小如何变化。通过设置容器为`display: flex;`，你可以控制子元素（flex item）在水平（row）或垂直（column）方向上的行为，如自动填充空间、围绕中心等。关键属性包括`flex-direction`（方向）、`justify-content`（主轴对齐）、`align-items`（交叉轴对齐）等。Flexbox极大地简化了复杂的网页布局设计。