为何同属一个div的文本内容会显示在边框的外部下方？

问题原因 #

核心是浮动高度塌陷：你给 .Sada、.odkazy 两个容器都设置了右浮动，浮动元素会脱离正常文档流，导致它们的父容器 .hlava 无法感知到子元素的高度，只有默认的极小高度，所以背景和边框只能包裹住这部分高度，浮动的文字内容就显示到了边框外部。

解决方案 #

方案1：触发父容器BFC（最简单，推荐） #

给 .hlava 添加 overflow: hidden 触发块级格式化上下文，即可自动包裹内部浮动元素：

.hlava {
  border: 1px solid white;
  background-color: lightgray;
  overflow: hidden; /* 新增该行 */
}

方案2：伪元素清除浮动（兼容性最好） #

如果后续需要父容器内的内容可以溢出显示，用伪元素做通用清除浮动即可：

/* 新增以下规则 */
.hlava::after {
  content: "";
  display: block;
  clear: both;
}

额外注意点 #

你给 .odkazy 下的a标签也加了右浮动，右浮动元素会按代码书写顺序从右往左排列，当前代码写在最前面的Elements会显示在导航最右侧，写在最后面的Home会显示在导航最左侧，如果需要调整导航顺序，直接反转a标签的代码顺序即可。

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