首页 > 其他分享 >30. 清除浮动的方法

30. 清除浮动的方法

时间:2022-11-13 16:33:59浏览次数:53  
标签:浮动 BFC 元素 清除 30 高度 设置

清除浮动是为了解决父元素因为子元素设置了浮动导致的高度塌陷问题:

此时父元素的高度没有被撑开 ;

 

父元素的高度已经被撑开 ;

 

 

 1. 添加额外标签设置clearfix类为clear:both;

2. 父元素添加overflow:hidden

3. 使用before和after双伪元素清除浮动

4. 设置父元素为浮动元素

5. 设置position:absolute

 

清除浮动的说法是不准确的。应该是为清除浮动的影响。

 

延申问题:OVERFLOW:HIDDEN怎么清除浮动的 ;

overflow:hidden 会形成一个 BFC 块级格式化上下文 ,BFC 会把浮动元素的高度计算在内 ;BFC的内部元素不受外部元素的影响 ;

 

标签:浮动,BFC,元素,清除,30,高度,设置
From: https://www.cnblogs.com/zhulongxu/p/16886217.html

相关文章

  • 2022-2023-1 20221301 《计算机基础与程序设计》第十一周学习总结
    2022-2023-120221301《计算机基础与程序设计》第十一周学习总结作业信息这个作业属于哪个课程<班级的链接>https://edu.cnblogs.com/campus/besti/2022-2023-1-CFA......
  • 白嫖永久服务器1668309535005
    阿贝云服务器注册免费领取1核1g内存5m宽带10g内存的云服务器,对于个人来说完全够用了。还有免费备案和虚拟主机,免备案对于搭建个人博客就很方便,部署了小项目上去,运行流畅不......
  • 白嫖永久服务器1668309600001
    阿贝云服务器注册免费领取1核1g内存5m宽带10g内存的云服务器,对于个人来说完全够用了。还有免费备案和虚拟主机,免备案对于搭建个人博客就很方便,部署了小项目上去,运行流畅不......
  • 白嫖永久服务器1668309595005
    阿贝云服务器注册免费领取1核1g内存5m宽带10g内存的云服务器,对于个人来说完全够用了。还有免费备案和虚拟主机,免备案对于搭建个人博客就很方便,部署了小项目上去,运行流畅不......
  • 3010f_未命名
    为什么星星会是这个样子……可是???当我发疯似的到了那里时已经什么也没有了......
  • 洛谷P5309 Ynoi 2011 初始化 题解
    题面。我也想过根号分治,但是题目刷得少,数组不敢开,所以还是看题解做的。这道题目要用到根号分治的思想,可以看看这道题目和我的题解。题目要求处理一个数组a,支持如下操作......
  • 2022-2023-1 20221309《计算机基础与程序设计》第十一周学习总结
    2022-2023-120221309《计算机基础与程序设计》第十一周学习总结作业信息这个作业属于哪个课程<班级的链接>这个作业要求在哪里<作业要求的链接> https:......
  • 30分钟学完Python基础语法
    30分钟学完Python基础语法,有一门面向对象语言的基础,30分钟足够看一遍Python的基础了。基础语法#缩进取代大括号#用换行取代分号,也可以使用分号,无所谓#输出print();#输......
  • 2022-2023-1 20221307-计算机基础与程序设计 第十一周学习总结
    作业信息班级链接:https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求:https://www.cnblogs.com/rocedu/p/9577842.html#WEEK11作业目标:学习《C语言程序设计》......
  • ASEMI肖特基二极管MBR30200PT图片,MBR30200PT规格书
    编辑-ZASEMI肖特基二极管MBR30200PT参数:型号:MBR30200PT最大重复峰值反向电压(VRRM):200V最大平均正向整流输出电流(IF):30A峰值正向浪涌电流(IFSM):275A每个元件的典型热阻(ReJA):1.4℃/......