浮动高度丢失及其解决方法有哪些?

羞羞 发布于 7个月前 分类:问答

浮动高度丢失及其解决方法有哪些?

回复

共1条回复 我来回复
  • 浮动元素:

    按照流水排列:寻找能最小放下的位置,浮动会半脱离文档流,遮住其他未浮动元素的结构,但不会遮住内容

    元素都设置浮动,会造成父元素高度丢失

    解决办法:

    1:让父级浮动起来,但是会让父级脱离文档流

    2: 给父级添加 onerflow:hidden 但是不友好

    3:給父元素设置display:inline-block 类似文本效果

    BFC方案:

    1:在浮动元素后添加空白块,clear:both

    2:给父元素添加伪类:设置clear:both

    3:给父元素添加position,relative或者absolute可以解决高度丢失,父类后面写东西会被前面的定位遮住,可以用z-index设值显现出来,写的东西设置margin值很容易产生边距塌陷。

    定位:

    定位的元素能脱离文档流,不再是页面元素,会遮住其他结构和内容

联系我们

173-662-005

在线咨询: QQ交谈

邮件:woowuo@126.com

工作时间:周一至周五,10:30-18:30,节假日休息

关注微信