Float隐藏bug

233 阅读1分钟

今天我写这篇文章主要是在重构项目中发现了一个有意思的事情先给大家看图

红色方框是一行文字,最左侧有一个返回按钮,我的文档结构如下

html
<h2 class="title-info">
    <a class="back" href="#"><i></i><span> 返回</span></a>开通礼品卡批量下单功能
</h2>
css
 .back{           
            float: left;
            width:74px;
 }
 .title-info{
      text-align: center;
 }

意思就是文字居中,乍一看没有问题,可是当我们看到实际的效果时候,如上图,我们的文案整体偏右了。 这主要是因为。float虽然可以脱离文档流,但是不能脱离文字流,例如我们的文字环绕不就是使用float这个属性实现的么。 最简单的修改方案

.title-info{
      text-align: center;
      padding-right: 74px;
 }

就是右侧我们给一个同样的宽度。 另外一种修改方案:使用 position:absolute;另.back完全的脱离文档流。