CSS面试高频：浮动、清除浮动、BFC

CSS面试高频：浮动、清除浮动、BFC

浮动：实现块级标签水平布局

• 标准流：文档流，标签默认排列规则

常见标准流排版规则：

• 块级元素：从上到下，垂直布局，独占一行
• 行内元素/行内块级元素：从左往右，水平布局，空间不够自动折行

• 浮动的作用：图文环绕、网页布局
• 特点：脱离文档流，但不脱离文本流；浮动后的元素具备行内块元素的特性（即设置宽高、一行多个）

注：浮动元素不能通过text-align:center或margin:0 auto设置居中

清除浮动

原因：父子级标签，子元素浮动，父元素无高度，不能撑开标准流的块级元素

1. 直接设置父元素高度：

缺点：但有些布局不能固定父元素高度，如新闻列表，京东推荐等模块等

2. 额外标签法：

• 操作：
  1.给父元素内容的最后添加一个块级元素
  2.给添加的块级元素设置clear:both

• 缺点：会在页面中添加额外的标签，让页面的HTML结构变复杂

3. 单伪元素：用伪元素代替额外标签

 .clearfix::after {
      content:''; //必须添加，伪元素才会生效
      display:block;
      clear:both;
      }

优点：项目中使用，直接给标签加类即可清除浮动

4. 双伪元素 ：

 .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