如何解决浮动布局文档超长溢出问题？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何解决浮动布局文档超长溢出问题？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

解决浮动布局文档超长溢出的问题

网站布局中，有时需要将按钮或其他元素固定在页面的右侧，而内容很长的情况。使用 float 右浮动虽然可以实现此效果，但当文档内容超长时，会出现右侧按钮被内容遮挡的问题。

解决方案

为了解决此问题，需要给外层容器 .tips 添加两个 css 属性：

.tips {
  height: auto;  // 设置高度为自动
  overflow: hidden;  // 溢出内容隐藏
}

原理

• height: auto 设置容器的高度为内容的高度，避免文档超长时容器高度不足导致右侧按钮被遮挡。
• overflow: hidden 隐藏溢出的内容，防止超出的文本占据右侧按钮的位置。

效果对比

使用上述方法后，无论文档内容有多长，右侧按钮都会保持固定在页面右侧，如下图所示：

[图片1：右侧按钮始终保持固定]

[图片2：文档超长时，右侧按钮不会被遮挡]

到这里，我们也就讲完了《如何解决浮动布局文档超长溢出问题？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！