想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，在不不挤压右侧内容空间的同时，左侧文字溢出省略。同理当右侧内容变长的时候，右侧内容部全显示，左侧文字被挤压后溢出，出现省略号的显示效果。光用文字表达，可能难以想象所要表达的效果，让我们看看效果图吧。 右侧文字是…

BFC到底是什么东西BFC，怎样触发BFC，BFC的规则，BFC解决了什么问题，一文搞懂，进来瞅瞅吧

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于阅读。为此，我们一般使用wrapper 或者 container。在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，…

格式化上下文（Block Formatting Context），是 Web 页面中盒模型布局的 CSS 渲染模式，主要指一个独立的渲染区域或一个隔离的独立容器。 哪怕浮动元素（section3）也接着上一个盒子垂直排列（所有的盒子都左对齐）。

参考资料中是我从网上看到的有关塌陷，BFC中写的很好的几篇。讲的也很全面，教你如何用BFC，Containing Block(包含块解决）margin塌陷的问题。但是有一点他们都没有提及，就是为什么会有这些东西出现。 以上的这些问题，如果不去了解设计者的思路，是不太容易理清这些…