2021-09-26

最新推荐文章于 2025-06-17 10:59:44 发布

三个粉丝

最新推荐文章于 2025-06-17 10:59:44 发布

阅读量63

点赞数

文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/csdn_jwdlh/article/details/120488417

版权

浮动(float)属性常用于布局，但会导致元素脱标和父元素塌陷问题。为解决这些问题，文章介绍了四种清除浮动的方法：额外标签法、设置父元素overflow属性、使用after伪元素以及双伪元素法。这些方法旨在保持页面布局的稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法
选择器 { float: 属性值; }
在这里插入图片描述

浮动带来的影响

1.脱标

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

2.塌陷

浮动的元素会一行内显示并且元素顶部对齐，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

解决方法—清除浮动

方法一：额外标签法

<div style="clear:both"></div>

方法二：父级添加 overflow 属性

overflow:hidden

方法三：父级添加after伪元素

 .clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 }

方法四：父级添加双伪元素

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }