Web开发入门：CSS float属性设置后未正常生效问题排查

问题根本原因 #

• 未给两个浮动的.parking、.tents节点设置固定宽度，浮动元素默认宽度由内部内容撑开
• 你给两个section内部的p标签设置了margin-right: 50%，这个百分比是相对于section的宽度计算的，p本身的内容宽度加上50%的右margin，直接把section的总宽度撑到超出父容器.secondary-content的容纳范围，两个宽度过大的元素无法在一行内排列，只能上下堆叠
• 注释掉p标签后，section的内容只有图片、标题、列表，总宽度缩小到可以在父容器内放下，因此浮动效果恢复正常

修复方案 #

方法1：给两个浮动section设置固定宽度（推荐） #

给.parking和.tents增加宽度设置，总和不超过父容器.secondary-content的宽度即可，示例：

.parking, .tents {
  width: 48%; /* 预留2%的间隙，避免宽度溢出 */
}

如果需要保留p标签的右间距，把p的margin-right: 50%改成固定值或者更小的百分比即可，示例：

.secondary-content .parking p,
.secondary-content .tents p {
  margin-right: 10px;
}

方法2：补充父容器清除浮动规则（可选） #

浮动元素会导致父容器高度塌陷，建议给.secondary-content增加清除浮动规则：

.secondary-content::after {
  content: "";
  display: block;
  clear: both;
}

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