文本溢出父元素仍影响布局，overflow设多值均无效如何解决？

以下是几种可行的解决方法：

• 让文本脱离文档流
  给带虚线边框的父元素设置position: relative，文本所在元素设置position: absolute。这样文本不再占用正常文档流空间，父元素的尺寸调整（包括设为零高度）不会被溢出文本阻碍，同时也能保留文本显示（如果需要）。

• 使用浮动清除布局影响
  给文本元素添加float: left或float: right，使其脱离正常文档流，父元素可正常收缩。需要给父元素添加 clearfix 处理浮动，示例代码：

  .dotted-parent::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 让父元素不参与布局计算
  给带虚线边框的父元素设置display: contents，该属性会让父元素从布局树中移除，文本直接成为上层容器的子元素，父元素的尺寸设置不再受文本限制。注意：此属性兼容现代主流浏览器，老旧浏览器可能不支持。

• 隐藏文本的布局占用（按需使用）
  如果不需要显示文本，可给文本设置visibility: hidden; position: absolute;，既隐藏文本又消除其布局干扰；若需保留文本显示，仅保留position: absolute并配合父元素的position: relative即可。

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