CSS 弹性浮动布局应用

时间  2021-06-15 标签 css html css3 浏览器 wordpress 布局 post flex spa code

其实文章原名叫作 “碰到不支持 flex 的项目怎么办？”css

如今差很少已是 flex 的天下了，简单灵活，但有时仍是不可避免的会接触到 IE 浏览器，好比我最近接触的 阅文做家专区 (qq.com)，这个就是须要兼容 IE9， 也天然不能使用 flex 布局了。不能使用 flex 怎么办（这个项目怎么这么XX，都 2021 年了还要兼容 IE）？那只能回归传统布局方式了，也就是浮动布局。html

浮动 float 能够说是 CSS 布局里最为灵活的布局之一了，千万不要小瞧了浮动，有些布局只有浮动才能实现呢。下面将介绍几种常见的布局，一块儿看看吧css3

1、文本环绕布局

这类布局应该就是浮动最初的用意了，好比这样的浏览器

image-20210613162656099

设置一个左浮动就能够了，实现以下wordpress

<div>
  <strong class="float">浮</strong>
  <p>动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>
.float{
  float: left;
  /*其余样式*/
}

完整代码可访问 float-layout (codepen.io)布局

须要注意的是，浮动元素必须放在文本的前面（ HTML 结构），若是放在文本后面post

<div>
  <p>动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
  <strong class="float">浮</strong>
</div>

那么就会变成这样flex

image-20210613164121526

也就是说，浮动的影响范围是由浮动元素在 HTML 中的结构决定的，这一点很是重要spa

不过，如今不多会见到这种环绕布局了，但有些时候这种思路仍是挺有用的，好比在这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)，里面就用到了浮动的特性，实现了右下角文本环绕的效果，有兴趣的能够看看code

image-20210613163724968

2、两栏布局

两栏布局的特色是左边是固定尺寸，右边自动撑满剩余空间，例如

image-20210613164714278

结构以下

<div class="crad">
  <img class="head" src="xxx.jpg">
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>

浮动实现以下，主要是文本须要设置 overflow: hidden 。这里就不谈实现原理（BFC）了，有兴趣深究的能够查看这篇文章 CSS深刻理解流体特性和BFC特性下多栏自适应布局

.head{
  float: left;
}
.info{
  overflow: hidden;
}

若是右边是固定尺寸，好比这样的

image-20210613190639382

这种状况如何处理呢？不少人可能会想到右浮动，没错，可是要注意，HTML 结构不须要改动，也就是浮动元素仍然在文本的前面

.head{
  float: right;
}

值得注意的是，若是须要设置两栏的间距 margin，须要设置在浮动元素上

.head{
  float: left;
  margin-right: 8px;
}

完整代码可访问 float-2-cols

3、三栏布局

三栏布局的特色是左右是固定尺寸，中间自动撑满剩余空间，例如

image-20210613194613816

结构以下

<div>
  <img class="head" src="xxx.jpg">
  <div class="right">编辑</div><!--注意是在文本的前面-->
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>

注意，这里位于右侧的按钮在 HTML 结构中仍然是在文本的前方，只须要设置右浮动就好了

.head{
  float: left;
}
.info{
  overflow: hidden;
}
.right{
  float: right;
  margin-left: 8px;
  /*其余样式*/
}

完整代码可访问 float-3-cols (codepen.io)

4、文本省略跟随布局

还有一类比较常见可是有些棘手的布局，是这样的

  1. 当文本比较多时，超出隐藏，标签文本在最右边
  2. 当文本比较少时，标签文本跟随文本

示意以下

image-20210613201622656

这里如何使用浮动实现呢？仔细观察，其实就是一个两栏布局

<div class="card">
    <div class="right">编辑</div>
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另一个浮动的元素。</p>
</div>
.info{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

image-20210613202902951

很明显如今标签文本一直位于右边，那如何实现标签文本跟随的效果呢？其实能够嵌套一个最大宽度为 100% 的容器

image-20210613203615109

<div class="card">
  <div class="wrap"> <!--添加一个最大宽度为100%的容器-->
        <div class="right">标签</div>
        <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另一个浮动的元素。</p>
  </div>
</div>
.wrap{
  display: inline-block;
  max-width: 100%;
}

Kapture 2021-06-13 at 20.56.21

完整代码可访问 float-auto-text (codepen.io)

若是不考虑兼容的话，width: fit-content 会是更好的选择，可使容器保持 block 的特性，而且宽度由文本内容决定，详细能够参考这篇文章： 理解CSS3 max/min-content及fit-content等width值 

.wrap{
  /*display: inline-block;*/
  max-width: 100%;
  width: fit-content;
}

另外，若是多行文本就不适用了，能够用另外一种方式实现，详细原理能够查看这篇文章 CSS 实现多行文本“展开收起” (juejin.cn)

image-20210613224353616

完整代码可访问float-mul-tags (codepen.io)

5、其余扩展布局

这一部分至关于以上的扩展了，下面来看一个案例。

有时候标签的后面会有日期，会一直位于最右边，效果以下

image-20210614151235075

有人可能会想到绝对定位，可是这里的日期可能不是固定的，须要自适应宽度，那如何实现呢？其实就是就是两种布局的结合

image-20210614152148254

所以须要再添加一层容器，实现以下

<div class="card">
    <span class="date">6-14</span>
    <div class="outer-wrap"> <!--新加一层容器-->
        <div class="wrap">
            <div class="right">
                <button class="btn">标签</button>
            </div>
            <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另一个浮动的元素。</p>
    </div>
  </div>
</div>

下面就是两栏布局的写法

.date{
  float: right;
}
.outer-wrap{
  overflow: hidden;
}
提示：若是采用 fit-content 方式，能够省去 .outer-wrap 这一层容器

实时效果以下

Kapture 2021-06-14 at 15.30.57

完整代码可访问 float-auto-text-fixed (codepen.io)

6、总结和说明

上面介绍了浮动布局的几个经常使用案例，相信能适用于绝大部分布局，固然并非推荐你们必定要使用浮动布局，甚至有时候布局混乱（HTML结构与视觉不一致）、实现啰嗦（嵌套层级多）等状况，可是在不兼容 flex 布局的浏览器中仍是挺有用的（低于IE10），甚至还有仅仅只能使用浮动才能实现的布局（文本环绕）。这里总结以下

  1. 经过 BFC 实现自适应弹性布局，float + overflow
  2. 浮动的影响范围是由浮动元素在 HTML 中的结构决定的
  3. 经过设置最大宽度实现文本跟随效果（fit-content也能够）
  4. 其余布局可相互组合实现
  5. 另外这些 float 实现方式全兼容（IE6+），能够放心使用

随着 IE 的逐渐退去，有些布局也会慢慢的淡出，就像早年的 table 布局同样。但浮动布局一直在往新特性上发展，好比 Shapes 布局就须要浮动作支持，另外，浮动布局也在慢慢支持逻辑属性，好比 float: inline-start 。最后，CSS 最重要的是灵活性，多一种思路老是没错的。若是以为还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤

联系我们 沪ICP备13005482号-10