左浮动链接在div中居中问题：为何容器无法包裹元素？

一、容器无法包裹链接的原因 #

给链接设置float:left后，浮动元素会脱离正常文档流，容器元素的高度不会被浮动元素自动撑开，因此出现容器边框在链接上方、无法包裹链接的塌陷问题。

二、解决方案 #

方法1：兼容老浏览器（基于浮动+BFC） #

通过触发BFC修复容器塌陷，同时用嵌套inline-block容器实现浮动元素居中：

修改后的HTML：

<div id="schedlinks" class="cleardiv" style="text-align:center">
    <div style="border:1px solid white; overflow:hidden;">
        <div style="display:inline-block;">
            <a href="#SWradio">Shortwave Radio</a>
            <a href="#AMradio">AM Radio</a>
            <a href="#tv">Television</a>
        </div>
    </div>
</div>

修改后的CSS：

#schedlinks a{
    border:1px solid white;
    float:left;
    margin:0 5px; /* 增加间距避免链接挤在一起 */
}

• overflow:hidden让内层容器触发BFC，从而包裹住浮动的链接；
• 内层的display:inline-block容器会被外层的text-align:center居中，而链接在这个容器内左浮动排列。

方法2：现代浏览器推荐（Flex布局） #

直接用Flex替代浮动，代码更简洁，无需处理塌陷问题：

修改后的HTML：

<div id="schedlinks" class="cleardiv">
    <a href="#SWradio">Shortwave Radio</a>
    <a href="#AMradio">AM Radio</a>
    <a href="#tv">Television</a>
</div>

修改后的CSS：

#schedlinks {
    display:flex;
    justify-content:center; /* 实现水平居中 */
    gap:10px; /* 控制链接之间的间距，替代margin */
    border:1px solid white;
}
#schedlinks a{
    border:1px solid white;
    /* 无需再设置float */
}

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