备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

css清除浮动的几种办法

2024-03-08 23
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css清除浮动的几种办法


为什么需要清除浮动

一般来说，为了自适应，父盒子A是不设置高度的，有时候两个A的块级子元素为了在同一行显示，就会让A的块级子元素设置float浮动，这时候子元素就脱离了标准流，而其父盒子A没有脱离标准流，他们不在同一层级了，所以在不清除浮动的情况下，浮动的元素不会撑开父盒子高度，此时父盒子高度为0，和父盒子A同级的盒子B就会顶上去，占据A的位置，所以需要给父盒子A清除浮动所带来的负面影响，让父盒子A在子元素浮动的情况下，A也能有高度，不被它的同级元素占据它的位置。

  • 下面我们展示一下不清除浮动的情况下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

此时可以看到，父盒子A高度并没有被子元素1和子元素2撑开，所以父盒子A的位置就被同级盒子B占据，盒子B顶了上去。由于子元素1和子元素2是浮动状态，脱离了标准流，所以层级高于标准流的盒子B

清除浮动的几种办法

思路

清除浮动，实际上就是为了清除浮动所带来的负面影响，即让没有设置高度的父盒子A拥有高度，不影响下方元素的布局

方法1：给父盒子添加高度

最简便的办法，自然是给父盒子A添加高度，这样就不会影响下方元素的布局了

.father-box {
  width: 300px;
  height: 100px;
}

可以看到，父盒子设置了高度，下方的盒子B的布局就不会受影响了

优点：方便快速，代码简洁

缺点：在浮动元素高度不确定的时候不适用

方法2：父盒子添加overflow: hidden

.father-box {
  width: 300px;
  overflow: hidden;
}

或者

.father-box {
  width: 300px;
  zoom: 1;
}

此方法直接通过触发BFC，实现清除浮动。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，且ie6 7底下不支持BFC；不能和position配合使用，因为超出的尺寸的会被隐藏，

方法3：父盒子添加overflow: auto

.father-box {
  width: 300px;
  overflow: auto;
}

或者

.father-box {
  width: 300px;
  zoom: 1;
}

此方法直接通过触发BFC，实现清除浮动。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：代码简洁

缺点：内部宽高超过父级div时，会出现滚动条。且ie6 7底下不支持BFC。

方法4：额外标签法

给浮动的子元素同级下设置一个空的div元素（这个div和浮动的子元素同级，在同一父盒子中），空的div元素在css中设置样式为{clear:both;}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
      overflow: hidden;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .clear {
      clear: both;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
      <div class="clear"></div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

方法5：使用after伪元素清除浮动（推荐）

给浮动元素的父盒子添加伪元素，同时为了兼容 IE6，7 同样需要配合zoom使用

伪元素清除浮动，实际上也是类似于额外标签法，给伪元素后边加上一个没有高度的同级元素，只不过这个元素是用伪元素实现的，避免了标签过多造成代码错乱的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
    }
    .clearfix::after {
      content: "";
      clear: both;
      display: block;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box clearfix">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout，使元素根据自身内容计算宽高

方法6：使用双伪元素清除浮动（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
    }
    .clearfix::after, .clearfix::before {
      content: "";
      display: table;
    }
    .clearfix::after {
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box clearfix">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

方法7：父级同时浮动

此方法就是在子元素浮动的时候，父元素也跟着浮动，这样父元素和子元素同时处于脱标流状态，父元素的高度将被子元素撑开。但是不建议这样做，因为这又需要处理父元素浮动所带来的负面影响。

方法8：父级设置成inline-block

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
      display: inline-block;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

可以看出，浮动是解决了，但是父盒子也拥有了行内块元素的一些缺点，即下方多了空隙

优点：暂时没想到

缺点：父盒子也拥有了行内块元素的一些缺点，如父级的margin左右auto失效，无法使用margin: 0 auto;居中了，父盒子下方还有了几像素的间隙

方法9：br标签清除浮动

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的，在父盒子内部最后加上br标签，并给br标签的clear属性设置为both

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
      <br clear="both" />
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

优点：暂无

缺点：不符合工作中：结构、样式、行为，三者分离的要求

方法10：父级div定义display:table

将父盒子设置display: table; 可以清除子元素浮动带来的负面影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      border: 1px solid red;
      margin: 150px auto;
    }
    .father-box {
      width: 300px;
      display: table;
    }
    .son-one {
      width: 100px;
      height: 100px;
      float: left;
      background-color: rosybrown;
    }
    .son-two {
      width: 100px;
      height: 100px;
      float: left;
      background-color: sandybrown;
    }
    .bottom-box {
      width: 300px;
      height: 50px;
      background-color: skyblue;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="father-box">
      <div class="son-one">A的子元素1</div>
      <div class="son-two">A的子元素2</div>
    </div>
    <div class="bottom-box">同级盒子B</div>
  </div>
</body>
</html>

优点：无

缺点：会产生新的未知问题，不建议使用

关于BFC

关于css中BFC的概述，可以参考我另一篇文章CSS中的BFC

文章参考

https://blog.csdn.net/h_qingyi/article/details/81269667

https://www.cnblogs.com/nxl0908/p/7245460.html

https://blog.csdn.net/promiseCao/article/details/52771856

https://blog.csdn.net/bitkuang/article/details/82320365

文章标签：
前端开发
关键词：
CSS清除浮动
Boale_H
目录
相关文章
CaptainDrake
|
8月前
|
前端开发
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CaptainDrake
38 0
远近高低各不同
|
2月前
|
前端开发
CSS清除浮动的八种方法
CSS清除浮动的八种方法
远近高低各不同
34 1
m0_黎明
|
2月前
|
前端开发
CSS 清除浮动的几种方法
CSS 清除浮动的几种方法
m0_黎明
11 0
汪末末
|
7月前
|
前端开发
CSS 浮动和清除浮动方法总结
CSS 浮动
汪末末
59 0
张清悠
|
10月前
|
人工智能 前端开发 图形学
CSS基础浮动和清除浮动的分享
CSS的定位机制有3种： 标准文档流、浮动和定位。 标准文档流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。浮动(float) 浮动是个很有意思的事情：就是让任何盒子可以一行排列。
张清悠
61 1
CSS基础浮动和清除浮动的分享
派小星_
|
前端开发
CSS高度塌陷问题及清除浮动的三种方式
在父元素最后增加一个空的块级子元素，并且让它设置clear: both
派小星_
116 0
海绵宝宝_0113
|
前端开发
css常见的两种清除浮动方法
css中的浮动以及清除 1. 浮动的概念 浮动是网页布局中最古老的方式，但是这种方式最开始并不是为了网页布局而生的。浮动是为了让文字环绕图片而生的。在css中，浮动是通过float属性来实现的，float属性有left和right两个值，分别表示向左浮动和向右浮动。正是因为浮动并不是为网页布局而生的，导致我们在后面在使用的时候会有很多出乎意料的方式。
海绵宝宝_0113
172 0
黛琳ghz
|
前端开发 容器
前端开发面试题—CSS清除浮动的方法
今天分享一下我遇到的一个面试题，是关于CSS浮动布局的问题，问的是CSS清除浮动的方法有哪些？
黛琳ghz
144 0
前端开发面试题—CSS清除浮动的方法
26fgfyxgmott4
|
前端开发
深入理解css浮动带来的问题及解决方法（清除浮动）
深入理解css浮动带来的问题及解决方法（清除浮动）
26fgfyxgmott4
157 0
深入理解css浮动带来的问题及解决方法（清除浮动）
游客gvbjrs3kxg3za
|
前端开发
CSS清除浮动
CSS清除浮动
游客gvbjrs3kxg3za
74 0
CSS清除浮动

热门文章

最新文章

  • 1
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 2
    《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
  • 3
    《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
  • 4
    前端代码整洁与规范之CSS篇
  • 5
    《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
  • 6
    Tailwind CSS如何在vue项目中使用
  • 7
    【前端设计】HTML+CSS+JavaScript基本特性
  • 8
    【掰开揉碎】详解 CSS3 Grid 布局
  • 9
    解密CSS单位：px、em、vh的区别与应用
  • 10
    CSS 中BFC是什么？
  • 1
    jQuery+CSS3自动轮播焦点图特效源码
    17
  • 2
    会员项目定价卡css3特效
    16
  • 3
    CSS3病毒病原体图形特效
    12
  • 4
    前端的CSS选择器
    24
  • 5
    CSS清除浮动的八种方法
    34
  • 6
    CSS之弹性盒子Flexible Box
    34
  • 7
    CSS水平居中与垂直居中的方法
    20
  • 8
    CSS关于默认宽度
    10
  • 9
    CSS画三角形(三种方法)
    16
  • 10
    CSS背景background八种属性
    22

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考