如何清除浮动

清除浮动的几种方式

2.6 何为清除浮动？

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

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

1. clear 清除浮动

   • 在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。

   • 可使用<br class="clear" />或<hr class="clear" />来进行清理。

   • 给行内元素设置 css 样式

     a {
       display: block;
       clear: both;
     }
     

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

   • 给浮动元素后面的元素添加 clear 属性

2. 使用 CSS 的 overflow 属性
   给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

3. 使用伪元素

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

4. 给浮动元素的父级添加浮动
   给浮动元素的容器也添加上浮动属性即可清除内部浮动

   • 缺点：会使其整体浮动，影响布局，不推荐使用。

5. 给浮动元素的父级设置高度
   我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。

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