css 子元素使用float,而父元素没有高度,不能自适应的问题


当对盒子内的子元素应用float后,导致对象父元素内有高度,不能被撑开自使用高度。
这是因为对子元素使用float之后,脱离了正常流,使得父元素没有高度导致的。

解决办法:

1.为父元素设置高度:适用于知道父级高度的情况,缺点是父级元素不能自适应

2.使用clear:both清除浮动:这里注意是在父元素的结束标签之前添加一个清除浮动的元素,不是在父级元素上添加清除浮动,缺点是引入了没有语义的元素

3.在父元素中加overflow:hidden:这个方法可以使父元素自适应

4.在父元素上加伪类:after:利用:after在父元素内部插入元素块,达到清除浮动的效果,实现原理类似于clear:both方法。

{

  clear: both; content:" "; display: block; width:0; height: 0; visibility: hidden;

}

 

参考:https://www.jianshu.com/p/a1724eeb07a6


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM