CSS面试高频:浮动、清除浮动、BFC
浮动:实现块级标签水平布局
- 标准流:文档流,标签默认排列规则
常见标准流排版规则:
- 块级元素:从上到下,垂直布局,独占一行
- 行内元素/行内块级元素:从左往右,水平布局,空间不够自动折行
- 浮动的作用:图文环绕、网页布局
- 特点:脱离文档流,但不脱离文本流;浮动后的元素具备行内块元素的特性(即设置宽高、一行多个)
注:浮动元素不能通过text-align:center或margin:0 auto设置居中
清除浮动
原因:父子级标签,子元素浮动,父元素无高度,不能撑开标准流的块级元素
- 直接设置父元素高度:
缺点:但有些布局不能固定父元素高度,如新闻列表,京东推荐等模块等
- 额外标签法:
操作:
1.给父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both缺点:会在页面中添加额外的标签,让页面的HTML结构变复杂
- 单伪元素:用伪元素代替额外标签
.clearfix::after {
content:''; //必须添加,伪元素才会生效
display:block;
clear:both;
}
优点:项目中使用,直接给标签加类即可清除浮动
- 双伪元素 :
.clearfix::before,
.clearfix::after {
content:''; //必须添加,伪元素才会生效
display:table;
}
.clearfix::after {
clear:both;
}
优点:项目中使用,直接给标签加类即可清除浮动
注意:.clearfix::before作用:能解决外边距塌陷问题
- 父元素设置overflow:hidden
BFC:边距重叠解决方案
—BFC的原理/BFC的布局规则/BFC的渲染规则
1)BFC内部的子元素,在垂直方向,边距会发生重叠
2)BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之
3)BFC区域不与旁边的float box区域重叠
4)计算BFC的高度时,浮动的子元素也参与计算
—如何生成BFC
- overflow:不为visiable,可以让属性是hidden、auto
- 浮动中:float的属性值不为none,即只要设置了浮动,当前元素就创建了BFC
- 定位中:只要position的值不是static/relative,可以是absolute/fixed,也就生成了一个BFC
- display为inline-block、table-cell、table-caption、flex、inline-flex