如何让第三个div的margin-left以第二个div为基准计算？

当然可行，你可以通过以下几种方式实现：

方法一：给第三个div设置浮动（推荐） #

由于第二个div是左浮动状态，给第三个div也添加左浮动后，它的margin-left会自动以左侧的第二个div为基准计算：

.first {border: 1px solid #ccc; width: 800px}
.second {width:200px;float:left;}
.third {margin-left:10px; float:left;}

设置后第三个div会紧贴第二个div的右侧，margin-left:10px就是两个div之间的间距。

方法二：触发第三个div的BFC #

如果不想给第三个div加浮动，可以触发它的块级格式化上下文（BFC），让它能识别到左侧浮动的第二个div，此时margin-left会以第二个div为基准生效：

.first {border: 1px solid #ccc; width: 800px}
.second {width:200px;float:left;}
.third {margin-left:10px; overflow: hidden;}

除了overflow: hidden，还可以用display: flow-root、position: absolute等方式触发BFC，根据你的布局需求选择即可。

方法三：使用现代布局方案（Flex/Grid） #

如果允许重构布局，用Flexbox会更简洁可控，直接通过容器的gap属性设置子元素间距，无需手动调整margin：

.first {border: 1px solid #ccc; width: 800px; display: flex; gap: 10px;}
.second {width:200px;}
.third {}

这种方式下两个div的间距由gap直接控制，布局逻辑更清晰。

内容的提问来源于stack exchange，提问作者Shahpari