清除浮动的几种方案（不在死记硬背）

[wuweijia]

#技术笔记/css 阅读大约五分钟

在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些，你可以根据场景和需求，灵活运用不同的清除浮动的方法，而不再死记硬背那些网上找到的答案，祝你工作愉快。

为什么要清除浮动

我们总是在寻找答案，缺很少反问，为什么要这样做。

html

<div class="box">
	<div class="float-brother">我是浮动大哥</div>
	<div class="text">我是大哥的小弟一个普通的超超超超超超超超超超超超超超超超超长文本小‘绿’</div>
</div>
<div class="nextdiv">我是一个路人甲</div>

css

.box {
  width: 300px;
  border: 5px solid blue;
  overflow: auto;
}
.float-brother {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  color: red;
  margin: 4px;
  float: left;
}
.text-boy {
  color: blue;
  border: 2px solid chartreuse;
  clear: both;
}
.nextdiv {
  width: 500px;
  height: 100px;
  margin: 5px 0;
  border: 2px solid black;
}

结果 ( chrome 浏览器 ）

它存在如下问题：

1. 路人甲被波及了
2. 上面的dev没有完全包裹‘浮动大哥-大红’
3. ‘小绿’是想在那个位置么，如果不是怎么办。

清除浮动的方法

1. Clear属性

.text-boy {
  color: chartreuse;
  border: 2px solid chartreuse;
  clear: both;
}

清除浮动后的渲染效果如下：

通过上面的样式告诉浏览器，我的左边不允许有浮动的元素存在，请清除掉我左边的浮动元素。然而大哥的位置岂能是你说动就动的？ （位置已经确定），浏览器在计算小弟的位置时，为满足其需求，将小弟只能放在‘老二’的位置（下面一个新的位置），保证了小绿左右都没有浮动元素。同时可以看出，父元素的高度也被撑起来了，其兄弟元素的渲染也不再受到浮动的影响，

clear 的值为 both 通俗理解就是，不允许有浮动元素在我这碍眼，不然叫大哥打你，clear就是对应方向的值，两边都不允许就是 both )

但是，如果我们把帮派的老大和小弟交换一下位置呢？

<div class="box">
	<div class="text">我是大哥的小弟一个普通的超超超超超超超超超超超超超超超超超长文本小‘绿’</div>
	<div class="float-brother">我是浮动大哥</div>
</div>
<div class="nextdiv">我是一个路人甲</div>

无论 小绿 是否应用清除浮动，情况都是下面的样子：

::小绿::的位置先确定了，于是浮动元素就紧接着 ::小绿::下方渲染在父元素的左侧。然而，父元素的高度并没有被撑起来，导致浮动影响到了接下来的元素排版。

看来，为达到撑起父元素高度的目的，使用 clear 清除浮动的方法还是有适用范围的。我们需要更加通用和可靠的方法。 单从元素清除浮动的角度来考虑的话， clear 完全已经达到了目的，它帮助 小绿 清楚了‘异己’，但是没有维护好整个‘帮派’ 导致帮派‘内部’出现了问题

::划重点:: 所以我认为清楚浮动和撑起整个父元素高度是两件事。就跟排除异己，管理帮派要两步走一样。（下面会讲怎么管理‘帮派’）

2. 父元素结束标签之前插入清除浮动的块级元素 （这是我刚会清除浮动时常用的低效方法）

HTML结构如下，在有浮动的父级元素的末尾插入了一个没有内容的块级元素

<div class="box">
  <div class="text-boy">我是大哥的小弟一个普通的超超超超超超超超超超超超长文本小‘绿’</div>
  <div class="float-brother">我是浮动大哥</div>
  
  <div class="clear">我是管理帮派的小弟的小弟</div>
</div>
<div class="nextdiv">我是一个被波及的路人甲</div>

小弟的小弟的样式：

.clear {
  clear: both
}

渲染效果如下：

原理同一 (必须是一个块级元素哦)

3 利用伪元素

第二种的高阶写法

.clearfix:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
}

4 究其根本，万变不离其宗 。

块格式化上下文 - Web 开发者指南 | MDN 当你了解了BFC就知道为什么会出现这样‘离奇’的问题。 也侧面反映出一个问题，我们看问题或者解决问题，不要只看其表面，要看清问题背后的始作俑者，当你足够了解它，那么你在任何地方都不在惧怕他。 正所谓知己知彼百战百胜。

[ChengDu-JT]

【转】浮动元素脱离文档流，所以不占位置，当父元素没有设置高度时，不能撑开，导致父元素的高度塌陷，所以需要清除浮动。

方法1：子元素加clear 在浮动元素后面加一个空的子元素，并给其CSS属性clear；

clear取值：left 清除左浮动 | right 清除右浮动 | both 清除所有浮动

方法2：父元素加宽高 直接规定父元素的宽高，就不存在塌陷问题了。（缺陷）问题是，父元素的扩展性不好，比如要增加新内容时，又要重新设计计算高度。

方法3：父元素设置inline-block 将父元素的的display修改成inline-block。（缺陷）问题是：会导致父元素margin：auto失效。

方法4：父元素设置overflow：hidden 父元素设置overflow：hidden，可以解决。（缺陷）问题是：要配合宽度。

方法5：父元素利用伪类after 当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素加上一个的class名clear就可以解决： .clear{zoom:1;} .clear::after{content:""; diskplay:block; clear:both;}