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

原创已于 2022-11-10 20:22:51 修改 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2022-11-10 20:20:10 首次发布

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS中的浮动布局，包括其在图文环绕和网页布局中的应用及特点。同时，阐述了清除浮动的三种方法，分析了各自的优缺点。此外，介绍了BFC（Block Formatting Context）的概念，详细讲解了BFC的生成条件和作用，如解决边距重叠和防止元素重叠。最后，提供了创建BFC的几种方式，如设置overflow、浮动和定位。

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;
      }