CSS常见问题

BFC

什么是BFC

个人认为BFC是页面的一个隔离的独立渲染区域，区域内部的元素不会影响外部的元素。同理，外部的元素也不会影响内部的元素。

在CSS中有两种渲染区域，块级作用域（BFC），行内作用域（IFC）

BFC的布局规则：垂直排列，实际高度由内容+margin，而不是height决定。

属于同一个BFC的两个相邻元素，在垂直方向上margin会重叠，水平方向上不会。

计算父元素BFC渲染区域的高度时，内部浮动元素也会被计算到BFC中。

解决哪些问题：

父元素的高度是子元素内容撑起的

当子元素浮动，会导致父元素高度坍塌

方案1：为父元素设置overflow: hidden属性

原理：

overflow: hidden会强制要求父元素必须包裹所有的内部浮动元素，已经所有元素的margin范围

缺点：子元素多高，过宽无法展示全

方案2：在父元素内的结尾追加空子元素（块级元素），并设置子元素清除浮动影响（clear:both）

原理：clear:both: 设定元素两边都不存在浮动元素，即清除元素左右两侧的浮动。

常用四个属性值: (both，left，right， none)

clear:left => 表示该元素左边不存在浮动元素

clear:right => 表示该元素右边不存在浮动元素

clear:none表示两边允许有浮动元素

缺点: 无故多出个空元素，导致难以查找元素和选定选择器，比如（last-child）本应想找的是最后一个孩子，找到的却是空元素

方案三：给父元素也加上浮动

原理：浮动元素会强制使父元素扩大到包含所有浮动的内部元素。

解决：会存在和overflow: hidden一样的问题，此时可以将末尾所需要的元素clear:both

方案四：完美方法为父元素末尾伪元素 :after 设置clear:both

优点，既不影响显示隐藏，又不会影响查找元素，也不会产生多余的浮动

总结: 防止高度坍塌四种方案，

父元素:after {
content: '',
clear: both,
display:bloak, // table
height: 0, // 当设置display：table时,加上。某些浏览器中会存在默认高度

}