CSS布局是网页开发的核心技能。本专题系统讲解浮动、定位、Flexbox和Grid四大布局技术，从传统方法到现代方案，帮助学习者全面掌握页面布局能力。
本专题涵盖四大布局模块：
📝 发现内容有误？点击此处直接编辑
CSS中的浮动（float）属性最初设计用于实现文字环绕图片效果，浮动元素会脱离正常文档流，但仍会影响周围行内元素的布局。
以下哪个不是CSS中float属性的有效值？
以下哪种方式不是清除浮动的有效方法？
以下哪些是CSS中clear属性的有效值？
当父元素只包含浮动子元素时，父元素的高度会塌陷为0。这是因为浮动元素脱离了正常文档流。解决方法之一是让父元素创建 ______（块级格式化上下文）。
常见的触发方式包括：
CSS中的position属性用于控制元素的定位方式，默认值是static，表示元素按照正常文档流进行布局。
以下关于CSS定位的说法，哪个是正确的？
关于CSS的z-index属性，以下说法正确的是？
以下哪些position值会使元素脱离正常文档流？
补全以下CSS定位代码：
/* 固定定位 - 元素固定在视口指定位置 */
.fixed-box {
position: !!1_fixed!!;
top: 20px;
right: 20px;
}
/* 粘性定位 - 滚动时切换定位方式 */
.sticky-header {
position: !!2_sticky!!;
top: 0;
}
/* 绝对定位 - 相对于定位祖先 */
.absolute-box {
position: !!3_absolute!!;
top: 50%;
left: 50%;
}
CSS Flexbox是一种一维布局模型，它可以在一个方向上（行或列）排列子元素，适合处理组件级别的布局需求。
在CSS中，以下哪个属性值可以将容器设置为Flex布局？
Flex容器中有三个子元素，分别设置flex-grow为1、2、1，容器剩余空间为400px，请问第二个子元素会增加多少宽度？
CSS的flex简写属性可以一次性设置哪些属性？
在Flex布局中，主轴和交叉轴的对齐由不同属性控制：
.container {
display: flex;
/* 主轴方向对齐 */
_______________: center;
/* 交叉轴方向对齐 */
___________: center;
/* 主轴方向：水平排列 */
flex-direction: row;
}
CSS Grid布局是一种二维布局模型，可以同时控制行和列两个方向的元素排列，非常适合用于页面整体布局和复杂网格设计。
以下CSS代码创建了几列的Grid布局？
.container {
display: grid;
grid-template-columns: 100px 200px 100px;
}
在CSS Grid布局中，fr单位表示什么？
以下Grid代码实现的是什么布局？
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
以下哪个CSS属性用于设置Grid子元素之间的间距？
以下Grid代码实现什么效果？
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
使用Flexbox替代浮动布局实现三列布局时，以下哪个CSS代码可以实现"左列固定宽度200px，右列固定宽度150px，中间列自适应"的效果？
📝 发现内容有误？点击此处直接编辑
长按或扫描二维码，立即体验