清除浮动的几种方式（解决高度塌陷问题）

相信很多前端小白在进行页面设计时会用到浮动的方式进行布局，这样就会使元素脱离文档流。而在文档流中，父元素会默认被子元素撑开，一旦子元素设置浮动，完全脱离文档流，就会导致子元素无法撑起父元素的高度，就会产生父元素高度塌陷问题。下面小白就来介绍清除浮动的几种常见方式。

一、什么是父元素高度塌陷

上面我们提到了父元素出现高度塌陷问题的原因，那我们就先来了解什么是父元素高度塌陷问题。（直接上代码）

HTML 的DOM结构代码：

<body>
   <div class="parent-box">
   <div class="son-box"></div>   
   </div>
   <div class="another-box"></div>
<body>

css样式

<style>    . {      margin: 0;      padding: 0;    }    .parent-box {      width: 200px;      background: gray;      border: 5px solid;    }    .son-box {      width: 100px;      height: 100px;      background: blue;    }    .another-box {      width: 100px;      height: 100px;      background: greenyellow;    }  </style>

效果如图：

这时我们给son-box添加float : right属性,使其向右浮动，预期结果如下图：

但是实际结果却得到下图：

这就是父元素高度塌陷问题，父元素高度塌陷导致父元素下方元素向上移，覆盖了父元素原有的位置，这是我们最不希望出现的。只要子元素完全脱离文档流，都会出现父元素高度塌陷问题。

二、清除浮动的方法（解决高度问题）

那么如何解决呢，下面小白就介绍几种清除浮动的方法。

一、通过开启（BFC）块级格式化上下文（overfloat : hidden ; zoom : 1 ; )

根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，即块级格式化上下文，简称BFC。该属性可以设置打开或关闭，默认是关闭的。

一旦开启元素的BFC后，元素将会具有以下特性：

父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：

设置元素浮动：不能解决高度塌陷问题，反而导致高度塌陷
设置元素绝对定位：同上
设置元素为inline-block：可以解决高度塌陷问题，但是会导致父元素宽度丢失，不推荐使用这种方式
将元素的overfloat属性设置为一个非visible的值：推荐设置为hidden，这是开启BFC副作用最小的方式；但是这样会将溢出的内容隐藏，看情况采用

但是在IE6及以下的浏览器并不支持BFC，所以使用这种方式不能兼容部分浏览器。然而在IE6中虽然不支持BFC，但也具有另一个隐含属性叫hasLayout，该属性的作用和BFC类似，开启方式也有多种，这里就不一一列举，直接介绍一个副作用最小的方式：将元素设置zoom : 1 ;即可。具体代码如下：

.parent-box{   width: 200px;   background: gray;   border: 5px solid;   overflow: hidden;
   zoom: 1;}

二、在高度塌陷的父元素后面添加一个空的div元素

这是解决高度塌陷问题最简单的方法，直接在高度塌陷的父元素里最后面添加一个空的div，并将设置clear ：both 属性，这样由于这个空的div并没浮动，所以可以撑开父元素高度，基本没有什么副作用。但是会在页面中添加多余的结构，不建议使用。具体代码如下：

<body>
   <div class="parent-box">
   <div class="son-box"></div>
   <div style="clear: both;"></div>   
   </div>
   <div class="another-box"></div>
<body>

三、给浮动的父元素设定高度（拓展性差）

要想让子元素浮动，父元素又不会高度塌陷，就可以通过直接给父元素设定一个高度。但这种方法拓展性差，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

四、通过::after伪元素来清除浮动（推荐）

我们可以通过设置::after伪元素来清除浮动。即给高度塌陷的父元素添加一个::after伪元素，并给这个伪元素设置一定的样式，来清除浮动。原理与第二种方法类似，但这样既解决了高度塌陷问题，又不会造成页面结构冗余，是目前最为通用的清除浮动的方法，推荐使用。具体代码如下：

.parent-box {      width: 200px;      background: gray;      border: 5px solid;    }    .parent-box::after {      content: "";      display: block;      clear: both;    }

但是IE6 7是不支持伪元素的，为了兼容大多数浏览器，我们可以与上面提到的IE6 7及以下的浏览器支持的hasLayout相结合，可完美解决高度塌陷问题。

五、br标签清除浮动

br标签存在一个属性clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all，即能清除浮动。但这种方法与第二种一样，同样会使页面结构冗余。具体代码如下：

<body>
   <div class="parent-box">
   <div class="son-box"></div>
   <br clear="all" />  
   </div>
   <div class="another-box"></div>
<body>

以上就小白介绍的几种清除浮动，解决高度塌陷问题的方法，如有啥子错误的地方，或者有更好的方法，请多指教哦！！