欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

在 CSS 中清除浮点的 7 种方法

最编程 2024-04-16 11:45:11
...

一、浮动的定义

浮动 float

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来进行布局了。（CSS3 已经是真正意义上的网页布局）

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在 CSS 中，通过 float 属性来定义浮动，其基本语法格式如下：

选择器 {
  float: 属性值;
}
// 属性值有三种
// 1、left 向左浮动
// 2、right 向右浮动
// 3、none 不浮动，默认

为什么要清除浮动？

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

二、清除浮动有哪几种方式

第一种：额外标签法（clear: both）

是 W3C 推荐的做法：通过在浮动元素末尾添加一个空的标签例如

，或则其他标签 br 等亦可。

<br style="clear: both">
  1. 优点：通俗易懂，书写方便
  2. 缺点：添加许多无意义的标签，结构化较差。我只能说，W3C 你推荐的方法我不接受，你不值得拥有。

第二种：父级添加 overflow 属性方法（overflow: hidden | auto）

可以给父级添加： overflow 为 hidden | auto | scroll  都可以实现。

overflow: hidden
  1. 优点：代码简洁
  2. 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

第三种：使用 after 伪元素清除浮动（.clearfix:after）

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}       
.clearfix {
  *zoom: 1;
} /* IE6、7 专有 */
  1. 优点：符合闭合浮动思想  结构语义化正确
  2. 缺点：由于 IE6-7 不支持 :after，使用 zoom:1 触发 hasLayout。

注意：content:"."  里面尽量跟一个小点，或者其他，尽量不要为空，否则再 firefox 7.0 前的版本会有生成空格。

第四种：使用 before 和 after 双伪元素清除浮动（.clearfix:before, .clearfix:after）

.clearfix:before, .clearfix:after {     
  content:"";    
  display:table;  /* 这句话可以触发 BFC BFC 可以清除浮动 */    
}    
.clearfix:after {    
  clear:both;    
}    
.clearfix {    
  *zoom:1;    
}
  1. 优点：代码更简洁
  2. 缺点：由于 IE6-7 不支持 :after，使用 zoom:1 触发 hasLayout。

第五种：父盒子设置高度（height: 600px;）

  1. 优点：一行代码解决

  2. 缺点：需要知道盒子高度，且高度固定，使用范围极其有限。

第六种：父元素也浮动（float: left）

  1. 优点：也是一行代码解决
  2. 缺点：但是父元素的父元素也会产生高度塌陷，这波属于是 KO 自己了。

第七种：父元素直接设置 display: table（display: table）

  1. 优点：可以触发 BFC 块格式化上下文，限制其内部元素 float 的不影响到 BFC 外面。和第四种类似
  2. 缺点：使用表格元素属性解决浮动的同时，继承了表格元素的弊端。

三、浮动的应用场景

文字环绕图片效果

<div style="width: 500px;">
    <div style="float: left; clear: both;" align="center">
        <img src="/static/xxx.jpg" width="120" alt="图片标题" hspace="8"><br /> 图片标题
    </div>
    CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 CSS文字环绕图片 
</div>

三栏布局的实现（使用 float）

用浮动可以轻易实现三栏布局，当使用浮动后父元素高度会丢失，就可以用清除浮动方法来操作啦。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul class="parent">
    <li class="left">11</li>
    <li class="contarner">22</li>
    <li class="right">33</li>
    <br style="clear: both">
  </ul>

  <style>
  .parent {
    width: 100%;
    background-color: skyblue;
    padding: 0;
  }
  .left {
    width: 200px;
    height: 600px;
    float: left;
    background-color: #eee;
  }
  .contarner {
    width: calc(100% - 400px);
    height: 600px;
    background-color: pink;
    float: left;
  }
  .right {
    width: 200px;
    height: 600px;
    float: right;
    background-color: #ccc;
  }
  </style>
</body>
</html>

上一篇： 2024 哪款手机游戏性能好（新款手机游戏性能排行榜）

下一篇： 贾扬青把生命浪费在有趣的事情上

推荐阅读