BFC和CSS的两个BUG 20181223

BFC和CSS的两个BUG 20181223

两个经典的BUG

margin塌陷问题

当为一对普通流中的父子盒子中的子盒子设置margin-top时，如果父盒没有设置一个border-top，且双方的margin-top都为正的时候，那么就会存在有一个高度塌陷的问题。
具体的表现是父盒和子盒共享margin-top，如果他们同时具有margin-top的时候，以值最大的为准。
该问题的解决方法是使用伪元素来解决。也可以用BFC来弥补。

margin合并问题

当兄弟元素在文本流中，并且兄弟元素之间的的垂直margin都为正时，margin-top和margin-bottom会合并，选择值最大的。
这个问题可以使用BFC来解决，但是实际开发中是禁止随意改动HTML的结构的。所以一般都是直接只设置margin-top或者margin-bottom。

::before和::after两个伪元素

::before和::after这两个伪元素分别可以创建在在选定Element的子元素的逻辑最前和最后。他们两个一开始都是行内元素，同时具有一个独特的属性content，这个属性的值为伪元素的内容。

CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

注意：当你想使用伪元素来让一个容器包裹住浮动的块元素的话，当在伪元素上面使用clear属性的时候要注意到，该属性只能应用在块元素之上。

BFC和浮动

BFC如何触发

position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;

这是常见的几种触发的方式，具体请见MDN的块格式化上下文篇。

浮动模型

注意：凡是使用了float的块元素，在系统中，就像是他变成了inline-block一样，文字浮动在他的周围。

浮动流：
浮动流中的元素，块级元素看不到（就好像是不在一个空间一样），BFC能看到，inline能看到

posted @ 2018-12-24 11:43 秦晓 阅读( ...) 评论( ...) 编辑 收藏