清除浮动的方法有哪些？

[YvetteLau]

[nwjf]

overflow：hidden 让父级容器从新计算高度 2 clear: both; 清楚浮动 3 设置固定高度 4. after，before伪类 clearfix::after { content: ""; display: block; clear: both; }

不知还有没有或者正确否

[hoyong6]

BFC 就可以清除浮动 如何触发块级格式化上下文（常见）

1.根元素本身就会形成一个块级格式化上下文

2.overflow不为visible的

3.float不为none

4.inline-block 行内块元素

5.定位元素（position 是 absolute 或者 fixed）

6.flex 和 grid 布局

7.display 和 table 相关的，比如table， table-cell 等

像 overflow：hidden 让父级容器从新计算高度 就属于BFC 的第一种。

至于 4. after，before伪类 clearfix::after { content: ""; display: block; clear: both; }

这个 display: block; 这条属性同样的起到了作用。 1楼只是回答 可能的几种方法，面试官 可能会直接二连，问为什么这几种方法能清除浮动，然后 引申出浏览器渲染渲染原理，甚至是回流和重绘。至少这个问题，我首先会联想到BFC

[ZadaWu]

清除浮动的方法,详情参考CSS-清除浮动

• 使用带clear属性的空元素
• 使用CSS的overflow属性
• 给浮动的元素的容器添加浮动
• 使用邻接元素处理
• 使用CSS的:after伪元素

[shenanheng]

• 伪元素

    /* IE8 以上*/
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    /* zoom(IE转有属性)可解决ie6,ie7浮动问题 */
   .clearfloat{zoom:1}

• 结尾处加空标签

.clearfloat{clear:both}

• 定义父级的高度(固定布局)
• 定义父级

overflower:hidden;

[KRISACHAN]

1. 用display: grid代替浮动布局
2. 用display: flex代替浮动布局
3. 用display: table / table-*代替浮动布局
4. 用column-*代替浮动布局

[riluocanyang]

清除浮动的方法

1、伪类 ::after，::before 2、clear: both; 3、overflow: hidden(触发BFC机制)

[taoyaoyaoa]

清除浮动

1.clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;} 2.给浮动元素父级设置高度 3.父级同时浮动（需要给父级同级元素添加浮动） 4.父级设置成inline-block，其margin: 0 auto居中方式失效 5.给父级添加overflow:hidden 清除浮动方法 6.万能清除法 after伪类 清浮动

[tpxiang]

1、使用clear：both。 2、使用伪类before after 元素。 3、使用overflow：hidden。

[yangyiqiqia]

1、clear:both; 2、overflow:hidden 3、设定父级元素的高度

[chongyangwang]

1.celar:both; 2.父级容器设置高度； 3.父级设置overflow-hidden; 4:伪类 :before :after;

[sinaine]

1. 利用伪元素清除浮动

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

2. clear：both 3. overflow ： hidden 4.父级跟着浮动或者设定父级高度

[Cain-kz]

1. BFC的布局规则 overflow: hidden(触发BFC机制)

2.伪类清浮动 /* IE8 以上*/ .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0} /* zoom(IE转有属性)可解决ie6,ie7浮动问题 */ .clearfloat{zoom:1}

3.给父级元素设置高度或跟父级跟着浮动

[yelin1994]

清除浮动

这个更多的是用来解决高度坍塌问题

• 利用clear 属性，非float 块
• BFC 清楚浮动，父节点定位， 溢出等样式
• 在父类的伪类after 添加clear

[AILINGANGEL]

当块元素遇到浮动的元素会当浮动的元素不存在，清除浮动就是让块元素一直下移直到块元素的某一边或者某两边没有浮动元素为止。清除浮动的方式就是给块元素添加css的clear属性，为both, left, right.

[woyiweita]

清除浮动的几种方式：

　　清除浮动可以理解为清除浮动产生的影响。当元素浮动时也就是为当前元素创建了块格式化上下文（BFC），会对周围的元素或者父元素在布局上会产生一定的影响，比如：父元素因无法自动计算高度而产生的高度塌陷；因脱离文档流而使兄弟元素错位等。

　　要清除浮动产生的影响，其实就是在解决这两方面的问题。方法是可以通过设置父元素高度，或利用BFC，或者使用自带属性 `clear1 进行清除。

1. 设置父元素的高度 　　设置父元素的高度解决的是元素浮动产生的父元素高度塌陷问题，其内部元素浮动影响并未彻底清除，且需要进行计算然后再设置，比较固定，一旦子元素的高度发生改变，父元素的高度也需要再次计算设置，不够灵活。除非内容高度固定一成不变，否则不推荐使用。

2. 自带属性 clear 　　使用自带的属性可以非常好的解决浮动影响。该方法直观有效，哪里需要清除就在哪里添加一个兄弟元素，设置 clear 属性即可，一般属性值都设置为 both 清除两侧的浮动，也可以根据实际需要清除左侧或右侧，灵活方便直观。在 bootstrap 4.0 框架中的 clearfix 应用了该方法，其是在父元素中设置了伪元素，并设置了伪元素隐藏。

    .clearfix::after {
    display: block;
    clear: both;
    content: "";
    }

　　该方法是在元素内部清除兄弟元素浮动影响是比较推崇的，因为其灵活有效，想清哪里清哪里。说这个方法有什么不好的地方，需要添加或者新建一个节点，为新节点添加 clear 属性，也就是我们需要一个存放 clear属性 的盒子，来纠正在他之前兄弟产生的不良影响。

3. 利用BFC 　　使用 BFC 是一种比较灵巧的方法，也可以说是对症下药，因为浮动创建了 BFC，我们就用BFC去解决。根据实际项目中的应用写几个比较常用的。 - display:inline-block; - display:table; - overflow:hidden; - float:left/right; 　　该方法是需要把属性添加到父元素当中，以解决内部元素浮动影响。不能用于解决兄弟元素的浮动问题。

[YvetteLau]

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

<style>
    .inner {
        width: 100px;
        height: 100px;
        float: left;
    }
</style>
<div class='outer'>
    <div class='inner'></div>
    <div class='inner'></div>
    <div class='inner'></div>
</div>

1. 利用 clear 属性

在 <div class='outer'> 内创建一个空元素，对其设置 clear: both; 的样式。

• 优点：简单，代码少，浏览器兼容性好。
• 缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2. 利用 clear 属性 + 伪元素

.outer:after{
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

IE8以上和非IE浏览器才支持:after，如果想要支持IE6、7，需要给 outer 元素，设置样式 zoom: 1;

3. 利用 BFC 布局规则

根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算。因此清除浮动，只需要触发一个BFC即可。

可以使用以下方法来触发BFC

• position 为 absolute 或 relative
• overflow 不为 visible 的块元素
• display 为 inline-block, table-cell, table-caption

如：

.outer {
    overflow: hidden;
}

注意使用 display: inline-block 会产生间隙。

[MissNanLan]

创建一个BFC

根据BFC的规则计算BFC的高度时，浮动元素也参与计算, 父级元素设置为overflow：hidden

 <style>
        .left {
            height: 100px;
            width: 100px;
            float: left;
            background-color: blueviolet;
        }

        .right {
            float: left;
            height: 200px;
            width: 200px;
            background-color: brown;
        }
    </style>
 <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>

clear:both

就拿上面的代码来说，不清除浮动的话会导致父元素的高度塌陷。 可以在父元素的最后一个子元素加上clear：both

 <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
       <div  style="clear:both></div>
    </div>

伪类元素（::after,::before）

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

        }