清除浮动

清除浮动 

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

给浮动元素后面的元素换行符 br 添加clear属性。

方法五：父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

方法六：父级div定义 伪类:after 和 zoom

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在**小模块如ul里使用overflow:hidde**n;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。