html - 使用 display flex 会导致出现紫色边框

Question

我有以下简单的 HTML 结构:

<section id="teasers">
        <div class="wrapper">
            <a href="">
                <div class="redbox">
                    <h2 class="two-lines uppercaseme lowercaseme">Behind the Scenes<br/>
                        <span class="lowercaseme">A look at studio life</span>
                    </h2> 
                    <div class="clearfix"></div>
               </div>
           </a>
       </div>
</section>

并应用了以下 CSS:

.redbox {
    padding: 0 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#teasers h2 {
    float: left;
    margin: 7% 0;
}

这个错误似乎 HERE 。如果将屏幕尺寸缩小到 992px 以下。

基本上，应用 flex 会导致 H2标签内 .redbox有一个紫色的边框。如果删除 display: flex在开发工具中，紫色边框消失了。怎么会？

这是一个已知问题吗？解决方案是什么？

Answer 1

下划线确实是 block 级链接中的 text-decoration(包装 a)，它应该在那里。

它是关于 float 的，而不是 flex 的。 float 隐藏了你的下划线。由于 flex 忽略了 float ，因此下划线重新出现。如果您在大于 992 像素的屏幕上从 H2 中删除 float: left(容器是 block，而不是 flex那里)，您会再次看到该下划线。

问题是为什么 float 时下划线消失？它必须与从正常流中取出的元素有关(很像绝对定位):https://jsfiddle.net/b5jagc1m/