关于css布局——流 的小学问

半个月前，进入了张大大的粉丝群，大大旨在帮助我等菜鸟提升能力，净化圈内渣渣，所以，我进去了。
第一次是关于css布局等小问题，题目如下：

因为题目还算是简单，所以我也献丑了一番，虽然我做了2个小时！（渣渣！）
所以我的答案是

 dl {
        border: 1px solid gray;
        overflow: hidden;
    }
 dl dt {
        float: left;
        padding: 10px;
    }
 dl dd {
        padding: 10px;
        text-align: right;
    }

大大解答的时候，点到了我勒！！！（激动）说：这位同学的答案，用了浮动来实现，就是太啰嗦了。。。好吧，大大，我改进。

  dt {
width: 5em;
float: left; 
}   
dd{
 overflow:hidden;
  }

这个高明之处在于1、简洁明了；2、解决错位问题（width:5em；），给前面固定宽度，不至于错位。

当然，我们要考虑极端情况，
1，文字内容很多；
2，连续的一串英文字符；
3，没有文字内容。
当内容是连续英文符的时候，word-break属性，

word-break:break-all;

当没有文字内容的时候，

     dd:empty::before {
                      content '-';
                     color: #999;
            }

给他设定一个字符占位，就不会因为流的自身属性错位啦！

最后，大大给了自己的代码，我们都没有写到的，根据流的自身属性进行编写

  dd {
             margin: -1.5em 0 0 5em;    
            }

其他大侠的精编：
公共部分：

dl {
line-height: 1.5;
margin: 0; padding: 10px;
border: 1px solid #ccc;
background-color: #fff;    
   }
dd {
word-break: break-all;    
text-align: right;
margin-left: 0;
  }
dd:empty::before {
content: '-';    
color: #999;
}
/* absolute实现 */
dt {
position: absolute;
   }
   dd {
margin-left: 5em;    
     }
     /* flex实现 */
    dl {
display: flex;
flex-wrap: wrap;
}
    dt {
width: 5em;
    }
   dd {
width: calc(100% - 5em);
 }
 /* grid实现 */
     dl {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
 }

最后，勉励自己，勤敲代码，多思考！