CSS盒子浮动——脱离文档流、高度塌陷、文字环绕

盒子浮动样例——导航栏和固定联系栏制作效果图（代码在文章末尾）：

目录

盒子浮动

（一）浮动

（二）清除浮动

（三）脱离文档流

（四）浮动带来的影响

1、父盒的高度塌陷

2、兄弟盒子的文字环绕

---

盒子浮动

浮动（float）是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列（所有盒子浮动），或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果时，最简单的方法就是运用浮动属性使盒子在浮动方式下定位。

（一）浮动

浮动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。float 属性定义元素在哪个方向浮动，任何元素都可以浮动，而浮动元素就会变成一个块状元素。none 为对象不浮动，left 为对象浮在左边，right 为对象浮在右边。

语法格式：
float:none | left | right

（二）清除浮动

页面布局中，浮动属性用得好可实现良好布局，用不好会致页面错位。容器含浮动元素时，高度常无法随内容伸长，内容溢出致错位，此为浮动溢出 。

防止浮动溢出的 CSS 处理即清除浮动，是清除元素 float 属性。CSS 里，浮动与清除浮动（clear ）对立，清除浮动能解决页面错位，还能处理子级浮动使父级背景无法适配子级高度的问题 。clear 的参数中，none 允许两边有浮动对象；both 不允许有；left 不允许左边有；right 不允许右边有。

语法格式：
clear:none | left | right | both

（三）脱离文档流

盒子浮动起来后，会生成一个与父盒等宽的浮层。

左浮动：第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。（见动画演示）

右浮动：第一个设置右浮动的盒子浮至浮层，其它设置右浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。

浮动盒排布规则：

1.向上向左 or 向上向右 排列

2.若空间无法容纳，则先向下移动，直到高度足够后再向左 / 向右（取决于该盒子被设置为左浮动还是右浮动）

3.当前浮动盒的顶边，不得高于上一个浮动盒的顶边

（四）浮动带来的影响

1、父盒的高度塌陷

当父盒高度没有设置时，其高度由子盒撑开。若子盒全部浮起，则高度塌陷为 0。

副作用：

1.当子元素设置浮动后脱离文档流，父元素无法感知子元素的高度，导致自身高度计算为 0。此时父元素的边框、背景等样式可能无法正常显示。

2.父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，破坏原本的布局结构。例如底部内容可能与浮动元素区域重叠。

最简单的解决方案：

如果场景允许，可直接给父盒设置一个明确的高度值。但此方法不灵活，通常不推荐，除非确实需要固定高度（因为有时候我们确确实实希望父盒高度由盒子决定，比如说动态渲染的场景就不适合）

为父盒设置明确高度值，有很多不足：

1.子元素内容变化导致布局错位：若子元素高度动态增加（如用户输入、异步加载数据等），父元素的固定高度无法自动扩展，会出现内容溢出或遮挡现象。

2.响应式适配能力缺失：固定高度在不同屏幕尺寸下易导致布局断裂，无法实现移动端多设备适配等自适应需求。

3.代码耦合度高：父元素高度需手动与子元素内容保持同步，任何子元素结构调整都会迫使开发者重新计算父元素高度。

2、兄弟盒子的文字环绕

盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中，文本会非常敏感，将自动环绕浮动盒。（浮动机制的设计初衷：不是为了给你做导航栏的，而是用来制作图文混排效果的页面）—— 对于现代前端开发来说，这种特性反而成为一种副作用。

效果图源代码：

  
  
    
  
        
广东XXX学院
  
        
欢迎来到: 计算机学院
  
        
 
        
  
            
  
                
首页
  
                
关于我们
  
                
学生风采
  
                
联系方式
  
            
  
        
  
    
  
    
  
    
  
        
  
            
  
                
文章标题
  
                
这里是文章的内容简介。
可以使用
标签进行换行。
  
                



                  
                
想了解广东XXX学院：点击这里
  
            
  

            

            
  
                
侧边栏
  
                
侧边栏内容，如快速链接、广告等。
  
                
  
                    
  
                        
专业
  
                        
链接
  
                    
  
                    
  
                        
计算机应用技术
  
                        
专业A详情
  
                    
  
                    
  
                        
数字媒体技术
  
                        
专业B详情
  
                    
  
                
  
            
  
        
  
    
        
  
            
联系我们
  
            
  
                姓名:
                
  
                邮箱:
                
  
                  
            
  
        
  
    
  
    
  
    
  
        
版权所有 © 2024 广东XXX学院计算机学院