两个经典Bug及其解决方法

  1. margin塌陷:当父元素包裹着子元素时,垂直方向的margin取两者之中较大的数值。
    解决方法:
    1.给父元素设置一个border-top(不建议采用)
    2.bfc(block format context --- 块级格式化上下文)

如何触发一个盒子的bfc:
1.position: absolute;
2.display: inline-block;
3.float: left / right;
4.overflow: hidden; (隐藏溢出部分)

利用bfc改变父元素渲染规则,针对需求选取4种触发bfc的方法解决塌陷问题

  1. margin合并:两个兄弟元素垂直方向上的margin会合并,margin会取两者之中较大的值。
    解决方法:给其中一个或两个元素都增加一个父级,并用bfc改变父级元素的渲染规则(一般允许存在margin合并,可用计算方法实现所需效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 曾记几时,那少年每天都要到狄恩去看看? 曾记几时,那少年独自徘徊在狄恩的路上,看着身边的商店忙碌的人们,为了天币那...
    释然行者阅读 202评论 0 0
  • “你叫什么?” “莲子” 真好听的名字,我望着手机屏幕呆呆的想着。好久没有这么畅快淋漓的聊天了,也好久没有遇到过这...
    墨小凝阅读 158评论 0 1