【打卡】

[swustzzh]

书名：CSS世界

章节： 第六章 流的破坏与保护

思考：

• float本质上就是为了破坏文档流，实现文字环绕的效果，不是bug
• clear:both的本质是让自己不和float元素在一行显示，不是真正意义上的的清除浮动
• 以前没接触flex布局的时候，float布局确实搞的头疼，后来基础flex/grid布局的时候都在想，要是早点对CSS更熟悉，是不是就不存在以前的浮动问题，两侧和中间保持同样宽高gap的问题了

下一小节是CSS中很重要的一部分BFC，继续学习。

[swustzzh]

触发BFC的条件：

• html根元素（本身就是一个最大的BFC）
• float的值不为none
• overflow的值为auto, scroll或hidden
• display的值为table-cell, table-caption和inline-block中任何一个
• position的值不为relative和static

[swlws]

关于布局，有几个挺有趣的点：

1. position: fixed 失效的因素，可以做一些有趣的事情
2. flex 布局的 gap，应该时是被废弃了吧，不建议使用
3. width、min-width、max-widhth，混合使用时，有魔法效应～～

[swustzzh]

关于布局，有几个挺有趣的点：

1. position: fixed 失效的因素，可以做一些有趣的事情
2. flex 布局的 gap，应该时是被废弃了吧，不建议使用
3. width、min-width、max-widhth，混合使用时，有魔法效应～～

1. fixed失效的原因，会相对定位于transform或filter不为none的父级元素，absolute会相对于position不为static的祖先元素进行定位，当这样的祖先元素不存在时，则相对于设置了transform或filter不为none的父元素
2. 目前了解到的flex布局的gap只是在移动端有兼容性，且日常使用过程中没发现gap的相关问题（也可能应用场景比较少）
3. 魔法效应是啥？反问个问题，min-width和max-width的优先级谁高？

.css {
  min-width: 200px;
  max-width: 100px;
}