欢迎关注我的微信官方账号：在平时的开发中，前端侦探经常会遇到一些需要判断高度的场景。例如，当它们超过一定高度时，它们需要自动显示展开和折叠按钮，如下所示。

传统的思路一定是通过JS动态计算容器的高度，但这涉及到加载时间的问题。如果你得到的早，元素可能渲染不好，如果你得到的晚，你会有明显的停滞感，或者会导致页面闪烁。

有没有只使用CSS的方法？

当然有！为了达到上述示例的效果，需要解决以下问题：

如何判断不同的高度？如何在不同高度显示隐藏的点击按钮？怎么点击切换？花几分钟时间看一看。

一、先思考一下布局

明确一点，CSS现在有一个相关的方法来判断高度，那就是CSS容器查询。但是这个特性太先进了，目前几乎不能用于实战。这次我们将介绍一种更传统的方法。

如何判断不同的高度？换句话说，什么样的布局在不同的高度会有完全不同的效果？

想想吧。

绝对定位？位置完全固定，没有。

Flex布局？好像只能控制在水平方向

网格布局？这水太深了，没法研究(可能？)

等等，除了上面的，还有现在避免的浮动布局。为什么现在很少用了？原因是浮动布局非常脆弱，微小的尺寸变化都可能造成整个布局的崩溃。记得以前使用浮动布局时，尺寸需要准确，稍有差错就导致浮动元素不知去向。

既然对尺寸很敏感，那和这张纸的临界高度有关系吗？

是的，今天使用的方式是浮动布局。

二、浮动布局的奥妙

一步一步来，构建我们需要的页面原型。

我们先来看一个有趣的现象。有一个容器，有三个子节点，分别是A、B、C，其中A左漂，B、C右漂。

div class=' box ' div class=' a ' a/div div class=' b ' b/div div class=' c ' c/div/div . a { width:100p x；高度：100px浮动：左；背景色：cadetblue}.b{宽度：300px高度：100px浮动：对；背景色：珊瑚色；}.c{宽度：50px高度：100px浮动：对；背景色：深绿色；横向空间足够的时候，效果是这样的。

此时，A靠近左边，B靠近右边，C靠近B。

如果没有足够的水平空间，那么C将换行。

现在C看似在B下面跑，其实是因为B的高度没有超过a。

当B的高度超过A的高度时，那么C的行为如下。

此时，C附着在B的左侧，a的下方。

是不是很神奇？除了浮动布局，没有其他方法可以达到这种效果。那么，这和本文中的例子有什么关系呢？

别急，这其实是极端情况，再往下看。

三、极端情况下的浮动表现

我们可以设置一个极限状态，比如A的高度放满了容器，B的宽度放满了容器。这个时候B肯定会掉。我们用负边距把B保持在一行，如下。a{宽度：50px身高：100%；}.b{宽度；100%;左边距：-50px；}

此时B的高度并不比A高，所以C还是卡在B的下方，靠右。现在让B的高度超过A，也就是超过容器的高度，就变成这样了。

此时，C在a下面。也就是说，仅仅因为高度超过了临界值，C就得到两个不同的位置，如下所示

下面是动态演示(动态改变B的高度)

想想吧。把C想象成“展开和折叠”按钮。在此基础上，移动C的相对位置，移到正下方。是我们需要的效果吗？下面的虚线框表示移动后的位置，这样在可视区域内，高度不足时虚线框不可见，超过固定高度时才可见，如下图(观察虚线框的位置)。

完整的演示可以查看以下任何链接。

这就是float demo(code pen . io)float demo(runjs . work)的全部原理。再来看具体实现。

四、CSS 具体实现

现在回到最初的例子，根据之前的demo原型，可以将其转化为以下结构。

div class=' content ' pre class=' text '许多内容.许多内容./pre label for=' C1 ' class=' BTN '/label/div此处，text相当于B，和。BTN相当于c，至于A，可以用伪元素：before代替。

由于点击-切换交互，输入复选框需要与标签相关联，因此结构最终被转换成这样。

div class=' section ' input class=' content-check ' type=' checkbox ' ID=' C1 '隐藏div class=' content ' preclass=' text '许多内容./pre label for=' C1 ' class=' BTN '/label/div/div然后添加一些样式来美化它。由于原理和前面的完全一致，这里就不赘述了。内容{宽度：400px最大高度：200像素；溢出：隐藏；边框-半径：4px轮廓：2px虚线royalblue}.section { display:flex；}pre{空白：预换行；}.内容：在{内容：“”之前；宽度：100px身高：100%；浮动：左；}.btn{ float:右；宽度：100px文本对齐：居中；位置：相对；左：calc(50%-50px)；transform:translate y(-100%)；光标：指针；}.btn:在{ content:“”之后；显示：块；高度：34px背景色：# 666；过渡： 2s背景色；-WebKit-mask:URL(' data:image/SVG XML，

然后点击切换效果，可以控制：勾选。内容检查：已检查。content { max-height:fit-content；}.内容检查：已检查。内容。BTN { left:auto；右：calc(50%-50px)；}.内容检查：已检查。内容。BTN:after { transform:scaleY(-1)；}这样就可以控制不同的状态。

还可以加一个蒙版，让点击的地方淡出变弱，意思是不用担心，下面还有内容。text{ /* */-webkit-mask:线性-渐变(红色150px，透明200 px)；}效果如下

完整的演示可以访问以下任何链接

CSS自动高度扩展(codepen.io) CSS自动高度扩展(runjs.work):

五、最后总结一下

没想到浮动布局也能实现这样的功能。总的来说是一种低成本但富有想象力的方式，适应性和兼容性也不错。下面总结一下。

布局有很多种。浮动布局是非常脆弱的，小尺寸在超过规定高度后会导致整个布局崩溃。浮动布局造成的坍塌，正好可以区分两种情况。通过改变按钮本身的相对位置，点击开关只有在超过指定高度后才能看到。可以使用输入：check和label来实现淡化和弱化效果。可以加一层蒙版，表示下面还有内容。最后，如果你觉得还不错，有帮助，欢迎点赞。

欢迎关注我的微信官方账号：一个前端侦探。

本文参加了SegmentFault思维写作挑战赛，欢迎您加入阅读。