前端开发面试题—CSS清除浮动的方法

📚文章目录

🧽什么是浮动布局

🧽clear属性​​​​​​

🧽清除浮动其他方法

🧼使用CSS overflow属性

🧼使用CSS ::after伪元素（clearfix Hack）

---

今天分享一下我遇到的一个面试题，是关于CSS浮动布局的问题，问的是CSS清除浮动的方法有哪些？

🧽什么是浮动布局

• 首先我们要知道CSS浮动布局是使用的float属性来设置的，CSS的float属性将元素放在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素将从页面的正常流中删除，但仍保留为流的一部分。（与绝对定位相反， 绝对定位的元素忽略float属性）

• float的属性值

  值	描述
  left	元素向左浮动。
  right	元素向右浮动。
  none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
  inherit	规定应该从父元素继承 float 属性的值。

• 使用语法

  /* Keyword values */
  float: left;
  float: right;
  float: none;
  float: inline-start;
  float: inline-end;
   
  /* Global values */
  float: inherit;
  float: initial;
  float: revert;
  float: revert-layer;
  float: unset;
   
  /*
  left
  元素必须浮动在其包含块的左侧。
  right
  元素必须浮动在其包含块的右侧。
  none
  元素不得浮动。
  inline-start
  元素必须浮动在其包含块的起始侧。左边是脚本，右边是脚本。ltrrtl
  inline-end
  元素必须浮动在其包含块的末端。这是脚本的右侧，脚本的左侧。ltrrtl
  */
  

• 具体在页面中怎么浮动就不演示了

🧽clear属性​​​​​​

• CSS的clear属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
• clear的属性值

  值	描述
  left	在左侧不允许浮动元素。
  right	在右侧不允许浮动元素。
  both	在左右两侧均不允许浮动元素。
  none	默认值。允许浮动元素出现在两侧。
  inherit	规定应该从父元素继承 clear 属性的值。

• 使用语法

  /* Keyword values */
  clear: none;
  clear: left;
  clear: right;
  clear: both;
  clear: inline-start;
  clear: inline-end;
   
  /* Global values */
  clear: inherit;
  clear: initial;
  clear: unset;
   
  /* 
  none
  元素不会被向下移动以清除浮动。
  left
  元素被向下移动以清除左浮动。
  right
  元素被向下移动以清除右浮动。
  both
  元素被向下移动以清除左右浮动。
  inline-start
  元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。
  inline-end
  元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。
  */
  

• 其中，使用带clear属性（设置为clear:both）空标签就是清除浮动的方法之一

🧽清除浮动其他方法

• 🧼使用CSS overflow属性

• 如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

  然后我们可以向包含元素添加 overflow: auto; overflow: hidden;，来解决此问题

  #container {
    overflow: auto;
    /*overflow: hidden;*/
  }
  

• 🧼使用CSS ::after伪元素（clearfix Hack）

• 如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

   /*
   ::after 选择器向选定的元素之后插入内容 
   content:" "; （注意这里有一个空格）生成内容为空 
   display: block;
   clear:both; 清除前面元素浮动带来的影响 
   */
   
  .container::after {
    content: "";
    display: block;
    clear: both;
  }
  

  另一种写法

  .container::after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  

• 具体在页面中的清除效果就不演示了