Day3 打卡BFC
每日一句
Anger begets greater anger.
愤努只会招致更大的愤努。
问题复现
以上能看出父元素下有两个子元素，任一一个子元素css设定float:left(right一样)，就会造成父素高度坍塌。这样就会影响页面上的其他元素的布局。
解决方案
不好的解决方案：
给父元素设定高度，当然可以解决，但一般父元素的高度是由子元素决定的。
其他解决方案：4种解决方案
方案一：父级加overflow:hidden
- 如果两个子元素都浮动或第二个子元素浮动，可以父素加overflow:hidden可以解决。如果第一个子元素浮动，可以第二个元素上加overflow:hidden解决。缺陷：如果子元素有超过区域也要显示的话就没办法了。
方案二：增加空元素加clear:both
在元素上加一个空的元素，并设置样式clear:both;缺陷：无形之间增加了dom节点就会影响节点的查找
方案三：父级元素也浮动
给父级元素浮动可以解决。缺陷：这样无形会影响别的元素的布局。如后面的元素，可以在后面加clear:both.
方案四：给父元素加伪元素::afetr{content:""; display: block; clear:both}
这种解决方案即不没有增加元素，也不会影响其他元素布局。
Tip: display:table在旧版浏览器会有默认高度，可以设置height：0；
小结：
从以上方案可以看出，防止父元素高度坍塌问题是父级overflow：hidden, 父级加float:left, 加空元素clear:both 以及父素元素::after{content:"";display:block; clear:both; height:0;}; 可以解决问题。都会强制父元素包裹内部元素，这就是BFC
BFC(block fomatting content)
释义：块级格式化上下文，它是独立的网页渲染区域，这个区域只有块级元素参与，外部不影响内部，内部不影响外部。类似生活中的下图：
形成BFC的4种情况
- float值不是none
- position值不是static或relative
- display值是block,inline-block,table-cell,flex,table-caption,inline-flex
- oveflow值不是visible
由此看出上面问题的解决方案就是通过BFC解决。
BFC还能解决啥问题
BFC能解决父元素高度坍塌问题还能解决啥？
避免垂直方向margin合并
网页绘制中规定垂直方向margin会合并
解决方案：
- 在第二个元素的外层加一个元素，加overflow:hidden;这样就形成BFC，但有缺陷：
- 如果有些元素需要显示此方案就要把外层加个伪元素::before{content:"";display:table;}
- 在第二个元素前加一个空标签
<table></talbe>
伪元素中display：table 也是形成了BFC, 优点：不影响隐藏内容，不添加元素， 不影响高度。
不是BFC解决是：
- 用父元素padding代替子元素margin
- 父元素 + 透明上边框
避免垂直方向margin溢出
不用BFC解决是：
- 内部不用margin，父级用padding.也会影高度，可以用box-sizing:border-box 解决
- 在第二个元素加一个父级元素设置border:1px solid transparent.（高度就加了1px影响了高度，可能会导致其他问题）
BFC解决是：
- 父元素 overflow:hidden
- 加元素
<table></table> - 伪元素::before{content:""; display:talbe;}
网页左边定宽，右侧自适应
右侧元素只需设置overflow:hidden;
总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
