2021-09-26

浮动(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;
 }  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值