CSS中的float属性详解

描述
float属性用于实现元素的浮动效果，使元素脱离正常文档流，向左或向右移动，直到碰到父容器边缘或其他浮动元素。最初设计用于文字环绕图片，现广泛用于布局。主要取值：left（左浮动）、right（右浮动）、none（默认，不浮动）、inherit（继承）。

解题过程

1. 基本浮动行为

   • 当元素设置float: left/right时，会脱离正常流，向指定方向移动。
   • 后续行内元素（如文字）会环绕浮动元素，但块级元素会忽略浮动位置（可能被遮挡）。

   .float-left { float: left; width: 100px; height: 100px; }
   

   <div class="float-left"></div>
   <p>文字会环绕浮动元素，但块级盒子可能重叠。</p>
   

2. 浮动导致的父容器高度塌陷

   • 父容器若未设置高度，且子元素全部浮动，父容器高度会变为0（因浮动元素脱离文档流）。

   .parent { border: 2px solid red; }
   .child { float: left; width: 50px; height: 50px; }
   

   <div class="parent">
     <div class="child"></div>
   </div>
   <!-- 父容器边框内无高度 -->
   

3. 清除浮动（Clearfix）

   • 解决高度塌陷：使用清除浮动技术使父容器包裹浮动元素。
   • 方法1：在父容器末尾添加空元素并设置clear: both。

     .clear { clear: both; } /* 添加空div <div class="clear"></div> */
     

   • 方法2（推荐）：使用伪元素为父容器添加清除块。

     .parent::after {
       content: "";
       display: block;
       clear: both; /* 清除左右浮动 */
     }
     

   • 方法3：触发父容器的BFC（如overflow: hidden）。

     .parent { overflow: hidden; } /* 或overflow: auto */
     

4. 浮动布局的局限性

   • 浮动元素需固定宽度，灵活性差。
   • 相邻浮动元素间距需手动调整（margin）。
   • 现代布局中更推荐使用Flexbox或Grid替代浮动布局。

关键点

• 浮动元素脱离文档流，但不脱离父容器（仍受父容器边界约束）。
• 清除浮动的本质是让元素下方不允许出现浮动元素。
• 浮动布局渐被Flex/Grid取代，但理解浮动有助于处理遗留代码或特殊环绕效果。