html - 使左对齐的div占据所有空间

Question

我想制作一个在 Windows 命令提示符 中运行命令的指南。

.bold-cli {
        float: left;
        padding: 20px;
        margin: 20px 30px;
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        background-color: black;
        color: white;
}

<div class="bold-cli">
    C:\> Rundll32 %windir%\system32\dfshim.dll CleanOnlineAppCache 
</div>

我希望 div 只占用足以显示命令的空间，而不是水平拉伸(stretch)，所以我添加了 float: left。

问题是，这个div后面的内容不是换行开始的，是显示在右边的。

Answer 1

如下所示添加一个 clearfix div 以移除影响下一个元素的 float 。

 
.bold-cli {
    float: left;
    padding: 20px;
    margin: 20px 30px;
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    background-color: black;
    color: white;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

<div class="bold-cli">
 ABC ABC  ABC ABC  ABC ABC  ABC ABC  ABC ABC  AB ABC  ABC ABC  ABC 
</div>
<div class="clearfix">
</div>

Start from new line