css 解析一下浮动的工作原理，会引起什么问题

qq_37299525

于 2023-03-02 11:28:34 发布

阅读量78

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_37299525/article/details/129297559

版权

文章探讨了浮动元素如何脱离文档流，不占用空间，以及由此引发的页面高度塌陷问题。解决方案包括使用clear:both清除浮动，设置父元素的overflow:hidden，或应用display:inline-block及伪类after来避免内容塌陷。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    工作原理 
  浮动元素脱离文档流，不占据空间
浮动元素碰到包含它的边框或者浮动元素的边框停留
 
问题 
  高度无法撑开
非浮动元素跟随其后
造成页面塌陷
 
解决方案 
  末尾元素 clear: both
父元素 overflow:hidden
父元素 也浮动
父元素 display:inline-block
父元素 伪类after clear: both
 

                