.btn{浮动：左；/*其他装饰风格*/}如果设置了浮动右边。右上角的按钮怎么移到右下角？试试margin.btn{float:right;顶部边距：50px；/*其他装饰风格*/}可以看到虽然按钮到达了右下角，但是文字并没有把按钮上方的空间包围起来，留了一大片空间Cut，难道就没有办法了吗？虽然margin不能解决问题，但是整个文字还是会受到浮动按钮的影响。如果有多个浮动元素怎么办？这里伪元素用于替换::before.text::before{content:'';浮动：对；宽度：10px；height:50px;/*先随便设置一个高度*/background:red}现在按钮已经到了左边的伪元素，如何移动到底部呢？很简单，只需要清除floatingclear:both;就是这样。btn{浮动：对；明确：两者；/*其他装饰样式*/}可以看到现在文字完全被右侧两个浮动元素包围了，只要将红色背景的伪元素宽度设置为0（或者不设置宽度，默认为0)，会实现右下角环绕的效果。text::before{content:'';浮动：对；宽度：0；/*设置为0，或者不设置宽度*/height:50px;/*先随便设置一个高度*/}动态高度虽然完成了右下和环绕，但是高度是固定的，怎么设置动态地？这里可以使用calc计算，只需将整个容器的高度减去按钮的高度即可，如下。text::before{内容：'';浮动：对；宽度：0；height:calc(100%-24px);}不幸的是，它似乎没有任何效果。打开控制台发现calc(100%-24px)的计算高度为0，原因其实很容易想到。就是高度100%失效的问题。网上有一些对这类问题的分析。很多，通常的解决办法是给parent指定一个高度，但是这里的高度是动态变化的，还有展开状态，高度就更不可预测了，所以设置height除此之外，其实还有一种方式，就是使用flex布局。大致的方法是在flex布局的子项中按百分比计算变化高度。具体可以参考w3.org中css-flexbox的说明。如果flexitem有align-self:stretch，重做其内容的布局，将这个使用过的大小作为它的确定的交叉大小，以便百分比大小的孩子可以被解析。所以这里需要给.text包裹一层，然后设置显示：flexExpand如何浮动元素定位正如我们前面提到的，当一个元素浮动时，它会被移出正常的文档流，然后向左或向右平移，直到它碰到它所在容器的边界，或者碰到另一个浮动元素。