CSS布局核心属性有哪些？display、position和float怎么用？这三个属性是CSS布局体系的基础，覆盖了大部分常规页面的布局需求，掌握它们的用法能解决绝大多数布局场景的问题。
display属性详解
display属性用于定义元素应该生成的框的类型，不同的取值会改变元素的显示特性和布局行为，是最基础的布局控制属性。
常用取值说明
| 取值 | 作用 | 典型场景 |
|---|---|---|
| block | 元素生成块级框，独占一行，可设置宽高 | div、p、h1等默认标签，垂直排列的容器 |
| inline | 元素生成行内框，和其他行内元素共占一行，宽高设置无效 | span、a、em等默认标签，文本内嵌入元素 |
| inline-block | 元素生成行内块框，可和其他行内元素共占一行，同时可设置宽高 | 横向排列的按钮、图标列表 |
| flex | 元素生成弹性容器，子元素按照弹性布局规则排列 | 一维方向的复杂布局，如导航栏、卡片列表 |
| grid | 元素生成网格容器，子元素按照网格规则排列 | 二维方向的复杂布局，如后台管理页面、仪表盘 |
| none | 元素不生成任何框，页面中不显示且不占据空间 | 需要动态隐藏的元素 |
代码示例
/* 块级元素示例 */
.box {
display: block;
width: 200px;
height: 100px;
background: #f0f0f0;
}
/* 行内块元素示例 */
.inline-btn {
display: inline-block;
width: 80px;
height: 36px;
line-height: 36px;
text-align: center;
background: #1890ff;
color: #fff;
}
position属性详解
position属性用于指定元素的定位方式，配合top、right、bottom、left四个偏移属性，可以精确控制元素在页面中的位置。
常用取值说明
- static：默认值，元素按照正常文档流排列，偏移属性无效。
- relative：相对定位，元素相对于自身正常位置进行偏移，原本占据的空间仍然保留。
- absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行偏移，脱离正常文档流，不占据空间。
- fixed：固定定位，元素相对于浏览器视口进行偏移，脱离正常文档流，滚动页面时位置不变。
- sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位，常用于吸顶导航。
代码示例
/* 相对定位示例 */
.relative-box {
position: relative;
top: 20px;
left: 30px;
width: 150px;
height: 150px;
background: #ffccc7;
}
/* 绝对定位示例，父元素需要设置非static定位 */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #f0f0f0;
}
.child {
position: absolute;
top: 50px;
right: 50px;
width: 100px;
height: 100px;
background: #91d5ff;
}
/* 固定定位示例 */
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
float属性详解
float属性用于让元素脱离正常文档流，向左或向右浮动，直到碰到父元素边缘或者其他浮动元素的边缘，最初用于实现文字环绕图片的效果，后来也常用于横向布局。
常用取值说明
- left：元素向左浮动。
- right：元素向右浮动。
- none：默认值，元素不浮动，保持正常文档流。
浮动元素会脱离文档流，导致父元素高度塌陷，通常需要清除浮动来修复这个问题，常用的清除浮动方式有给父元素设置overflow: hidden，或者使用clearfix伪元素方案。
代码示例
/* 浮动布局示例 */
.float-left {
float: left;
width: 100px;
height: 100px;
background: #b7eb8f;
margin-right: 10px;
}
/* 清除浮动方案1：父元素设置overflow */
.float-parent {
overflow: hidden;
background: #f0f0f0;
padding: 10px;
}
/* 清除浮动方案2：clearfix伪元素 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
三个属性的配合使用
实际开发中这三个属性经常会结合使用，比如用display: flex做整体布局，内部某个需要固定在特定位置的元素用position: absolute，而一些需要文字环绕的简单场景可以用float实现。需要注意的是，浮动元素和绝对定位元素都会脱离文档流，而display的flex、grid等取值会创建新的格式化上下文，影响内部元素的布局规则，使用时需要根据具体场景选择合适的属性组合。
注意：现代布局中flex和grid已经可以覆盖大部分float和position的复杂布局场景，优先使用这两种新布局属性可以减少很多兼容性和布局异常问题。