清除浮动的常用方法

什么是浮动？

浮动是一种非常有用的布局方式。它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。

html中块元素有自己的排列规则，独占一行显示，设置浮动后元素就会脱离文档流，块元素会在同一行中显示。

为什么要清除浮动？

一旦有浮动就会产生问题，所以一旦要清除浮动。

清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题。

当父元素不给高度的时，内部元素不浮动时会撑开，而浮动的时候，父元素就会变成一条线。

清除浮动的常用方法：

1. 给受到浮动影响的元素添加overflow:hidden;

因为overflow属性会触发 BFC.

        BFC: block formatting context 块级格式化上下文 - 让元素强制按照块元素的规则进行排列

    2.在受到浮动影响的元素前面，添加一个空div，给空div添加样式：clear:both

      

    3.在浮动元素的父标签的伪元素选择器:after中清除浮动 - 类似于空div