如何在CSS中防止文本环绕左浮动图标元素？

问题原因 #

使用float: left布局图标时，若图标高度小于后续文本内容的总高度，文本会在图标下方继续排列。大图标（55px）高度足够覆盖标题+文本的高度，所以不会出现换行；小图标（35px）高度不足，就会触发文本环绕。

推荐方案：用Flexbox重构布局（现代且可靠） #

Flexbox能轻松实现图标与文本的横向排列，彻底避免float带来的环绕问题，同时布局更灵活。

步骤1：调整HTML结构（将标题和文本包裹到一个容器中） #

<!DOCTYPE html>
<html class="no-js" lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UI Playground</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/admonitions.css">
    <link rel="stylesheet" href="css/icons.css">
</head>

<body>
    <div class="admonition info">
        <span class="admonition-icon icon-35 mdi-information-outline"></span>
        <div class="admonition-content">
            <span class="admonition-title">This is an informational message with an Icon</span>
            <span class="admonition-text">
                Ut mollis ligula vulputate lectus eleifend, et commodo nibh faucibus.
            </span>
        </div>
    </div>

    <div class="admonition-alt">
        <span class="admonition-icon icon-55 mdi-ubuntu"></span>
        <div class="admonition-content">
            <span class="admonition-title">This is the title</span>
            <span class="admonition-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper turpis ex, eget fringilla ligula gravida nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vulputate lacus sed massa aliquet suscipit. Suspendisse potenti. Maecenas iaculis dolor non mollis ornare.
            </span>
        </div>
    </div>

    <div class="admonition-alt">
        <span class="admonition-icon icon-35 mdi-ubuntu"></span>
        <div class="admonition-content">
            <span class="admonition-title">This is the title</span>
            <span class="admonition-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </span>
        </div>
    </div>

</body>
</html>

步骤2：修改CSS样式 #

:root {
    --ui-font-stack-sans: "Helvetica Now Text", "Helvetica LT Pro", "Helvetica", "SF Pro Text", "Arial", sans-serif;
}

body {
    font-size: 15px;
    color: #555555;
    line-height: 1.5em;
    font-family: var(--ui-font-stack-sans);
}

/* Global Admonition Defaults */
div.admonition,
div.admonition-alt {
    border-radius: 5px;
    overflow: visible;
    page-break-inside: avoid;
    /* 替换flow-root为flex布局 */
    display: flex;
    align-items: flex-start; /* 图标与文本顶部对齐 */
    padding: 1em 0 1em 0em;
    margin-bottom: 1.5em;
    font-family: var(--ui-font-stack-sans);
}

/* 新增内容容器样式 */
.admonition-content {
    flex: 1; /* 占据剩余空间 */
    padding-left: 1em; /* 调整与图标的间距 */
}

div.admonition>.admonition-title,
div.admonition-alt>.admonition-title {
    display: block;
    font-size: 1.1rem;
    color: #535464;
    padding-left: 0; /* 移除原左侧padding */
    font-weight: 400;
}
div.admonition>.admonition-text,
div.admonition-alt>.admonition-text {
    color: rgb(118 116 116);
    font-size: .94em;
    font-weight: 400;
    display: block;
    line-height: 1.5em;
    padding-left: 0; /* 移除原左侧padding */
    margin-top: 2px;
}

/* Blue Info Admonition Colors */
div.admonition.info {
    border: 1px solid #3F73F2;
    background-color: #F8FAFF;
}

div.admonition.info>.admonition-icon {
    color: #3F73F2;
    margin-top: -7px;
}

div.admonition.info>.admonition-title {
    color: #2e72d8;
    font-weight: 400;
}

div.admonition.info>.admonition-text {
    color: #7182b1;
}

/* Gray Admonition Defaults */
div.admonition-alt {
    border-top: 4px solid #b4b3b3;
    border-radius: 0;
    background-color: #fafafc;
    font-family: var(--ui-font-stack-sans);
    overflow: visible;
    page-break-inside: avoid;
    display: flex; /* 替换flow-root为flex */
    align-items: flex-start;
    padding: .7em 0 .7em 0em;
    margin-bottom: 1.5em;
}

div.admonition-alt>.admonition-icon {
    color: #414247;
}

div.admonition-alt>.admonition-title {
    display: block;
    color: #3a3d42;
    font-weight: 500;
    margin-top: 5px;
    font-size: 1.4em;
    padding-left: 0; /* 移除原左侧padding */
    margin-bottom: .5rem;
    letter-spacing: -.02rem;
}

div.admonition-alt>.admonition-text {
    display: block;
    color: #686868;
    font-size: 16px;
    font-weight: 400;
    padding-left: 0; /* 移除原左侧padding */
    line-height: 1.5em;
    margin-bottom: 10px;
    letter-spacing: -.02rem;
}

/* Icon Specifics */
.admonition-icon {
    /* 移除float: left */
    flex-shrink: 0; /* 防止图标被压缩 */
}

.icon-35 {
    font: normal normal normal 35px/1 "Material Design Icons";
    display: inline-block;
    text-rendering: auto;
    position: relative;
    top: 8px;
    margin-left: 14px;
}

.icon-55 {
    font: normal normal normal 55px/1 "Material Design Icons";
    display: inline-block;
    text-rendering: auto;
    position: relative;
    top: 3px;
    margin-left: 16px;
}

备选方案：固定文本左侧边距（无需改HTML） #

如果不想调整HTML结构，可以给标题和文本设置足够大的margin-left，确保文本始终在图标右侧：

div.admonition > .admonition-title,
div.admonition-alt > .admonition-title,
div.admonition > .admonition-text,
div.admonition-alt > .admonition-text {
    margin-left: 60px; /* 大于图标宽度+左侧边距（35+14=49），预留足够空间 */
    padding-left: 0; /* 移除原左侧padding */
}

.admonition-icon {
    float: left;
}

注意：此方法不够灵活，若图标尺寸或边距变化，需同步修改margin-left值。

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