CSS-HTML Flexbox问题：为文本加样式时如何避免元素脱离容器

导致<b>或<span>包裹的文本跑出左侧蓝色列的核心原因，通常是元素脱离文档流、容器未处理溢出或盒模型冲突，以下是针对性解决方案：

1. 重置包裹元素的显示属性 #

确保<b>/<span>保持行内元素特性（默认就是行内，但可能被全局CSS篡改）：

.left-column b, .left-column span {
  display: inline;
  float: none;
  position: static;
}

2. 给左侧容器添加溢出裁剪 #

让容器自动裁剪内部溢出的内容，这是最常用的修复手段：

.left-column {
  /* 你的原有样式：宽度、背景色等 */
  overflow: hidden;
}

3. 统一盒模型避免尺寸溢出 #

防止内边距、边框撑大容器，确保元素尺寸计算包含内边距和边框：

.left-column, .left-column * {
  box-sizing: border-box;
}

完整示例代码 #

HTML #

<div class="two-column-layout">
  <div class="left-blue-column">
    <b>Lorem</b> ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="right-column">
    右侧列内容区域
  </div>
</div>

CSS（Flex布局方案，稳定性更高） #

.two-column-layout {
  display: flex;
}
.left-blue-column {
  width: 50%;
  background-color: #1e90ff;
  color: #fff;
  padding: 15px;
  overflow: hidden;
  box-sizing: border-box;
}
.right-column {
  width: 50%;
  background-color: #f0f0f0;
  padding: 15px;
  box-sizing: border-box;
}
.left-blue-column b {
  display: inline;
}

浮动布局方案（兼容旧浏览器） #

.two-column-layout::after {
  content: "";
  display: table;
  clear: both;
}
.left-blue-column {
  float: left;
  width: 50%;
  background-color: #1e90ff;
  color: #fff;
  padding: 15px;
  overflow: hidden;
  box-sizing: border-box;
}
.right-column {
  float: left;
  width: 50%;
  background-color: #f0f0f0;
  padding: 15px;
  box-sizing: border-box;
}

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