css清除浮动的几种办法

Boale_H
367 阅读6分钟

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

文章参考
blog.csdn.net/h_qingyi/ar…
www.cnblogs.com/nxl0908/p/7…
blog.csdn.net/promiseCao/…
blog.csdn.net/bitkuang/ar…

avatar
文章
阅读
粉丝