HTML5左右分栏推荐使用Flexbox或Grid：Flexbox通过display: flex、width: 200px与flex: 1实现；Grid通过display: grid与grid-template-columns: 200px 1fr实现；float兼容旧浏览器但需清除浮动。
如果您希望在HTML5页面中实现左右分栏结构，则需选择合适的CSS布局方式。以下是使用float和flex两种主流方法构建左右布局的具体操作步骤：
一、使用float实现左右分栏
float属性通过使元素脱离文档流并沿容器边缘浮动，从而实现并排排列。该方法兼容性好，适用于需要支持旧版浏览器的场景。
1、在HTML中定义两个块级元素，分别代表左栏和右栏，例如
2、为.left设置CSS样式：float: left; width: 200px; background-color: #f0f0f0;。
立即学习“前端免费学习笔记（深入）”；
3、为.right设置CSS样式：float: right; width: calc(100% - 200px); background-color: #e0e0e0;。
4、在左右栏父容器末尾添加一个清除浮动的元素：
，或对父容器应用overflow: hidden;以包裹浮动子元素。二、使用Flexbox实现左右分栏
Flex布局提供更直观、可控的弹性容器模型，能自动分配空间并响应内容变化，是现代HTML5推荐的布局方式。
1、将父容器的display属性设为flex：display: flex;。
2、为左栏设置固定宽度，例如width: 200px;，并可添加flex-shrink: 0防止被压缩。
3、为右栏设置flex: 1;，使其占据剩余全部可用空间。
4、若需控制主轴方向，确保父容器未显式设置flex-direction: column;，默认row即为水平排列。
三、使用CSS Grid实现左右分栏
CSS Grid提供二维布局能力，适合精确控制列宽比例与间距，无需依赖浮动或弹性行为。
1、对父容器应用display: grid;。
2、使用grid-template-columns定义两列：例如grid-template-columns: 200px 1fr;，其中200px为左栏固定宽，1fr表示右栏占满剩余空间。
3、移除子元素上所有float、display: inline-block等干扰布局的样式。
4、如需列间间隙，添加gap: 10px;或column-gap: 10px;到父容器。
