CSS浮动之高度塌陷

CSS浮动之高度塌陷

     ** “浮动”二字,顾名思义,就是让一个元素飘着、浮着,使之脱离文档流;它的作用就是让竖着排的元素横向排列。**

实例:用两个div标签
  浮动之前
在这里插入图片描述
在这里插入图片描述
浮动之后

在这里插入图片描述
在这里插入图片描述

浮动的属性值:左浮动:float:left;
         右浮动:float:right;
         默认值:float:none;

接下来我们来谈谈元素浮动之后出现的高度塌陷的问题。那什么是高度塌陷呢?

所谓浮动造成的高度塌陷,就是在父元素没有设置高度的情况下,其子元素浮动后,脱离文档流,则父元素处于塌陷状态(没有高度);因为子元素浮动后是不占据父元素的位置空间的。举个形象的例子:在塑料袋(父元素)中放了一个小纸箱(子元素),此时塑料袋是被小纸箱撑大的,小纸箱占据了塑料袋的空间,而当你把小纸箱拿出来时(浮动),塑料袋里没有了小纸箱,则之前被撑开的塑料袋就会变瘪,没有了高度,失去空间。这就是高度塌陷。

而当出现高度塌陷后我们如何解决呢?(用两个div标签来实验)

如图:父元素(box1)和子元素(box2)的初始状态

初始状态是box2在box1中,box1并没有设置高度,结果父元素box1是被撑开的。
在这里插入图片描述
在这里插入图片描述

当子元素(box2)浮动之后就让父元素(box1)产生了高度塌陷。
在这里插入图片描述
在这里插入图片描述

通常解决高度塌陷的方法有4种:

1.给父元素(box1)设置高度(这种方法适合高度固定的布局)
在这里插入图片描述
 在这里插入图片描述

2.给父元素添加声明overflow:hidden;(不建议使用)
在这里插入图片描述
 在这里插入图片描述

3.给所有的浮动元素的最后添加一个空标签,如div、p等,然后添加声明{clear:both; }。如果考虑到IE6和IE7浏览器低版本的兼容问题,再加上 hight:0; overflow:hidden;(不建议使用)
在这里插入图片描述
  在这里插入图片描述

4.用after伪元素清除浮动(万能清除法),给塌陷的父元素添加声明 box1:after{content:””; clear:both; display:block; visibility:hidden; }。如果考虑到IE6和IE7浏览器低版本的兼容问题,再加上 hight:0; overflow:hidden;(通用法)
在这里插入图片描述
在这里插入图片描述

另外还有3种解决方法,虽然能解决高度塌陷的问题,但是还带来其他的问题;所以基本不用。(了解)

1.父元素也浮动;(治标不治本,引发其他问题)
2.给父元素display:table;(转成表格)
3.可以给父元素添加overflow:auto/scroll;(容易造成滚动条)

小伙伴们 ,以上这些方法都可以解决浮动带来的高度塌陷的问题噢!对此你们是不是对高度塌陷有了更多的理解,也欢迎在评论区中提出其他解决高度塌陷的方法。让我们一起在学习中成长,加油!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值