清除浮动的方法

浮动会使当前元素脱离普通文档流，从而对父级元素和兄弟级元素造成影响，最终影响布局。所以，清除浮动是每个前端必须掌握的知识。下面列举几种清除浮动的方法，如下：

方法1：父级定义高度（height）

html代码：

css代码：

效果图：

原理：父级元素手动设置高度，可以解决子元素浮动后，父级元素无法自动获取高度的问题。

优点：代码少、简单、易掌握。

缺点：只适合高度已知的情况，有局限性。

建议：不建议使用。

方法2：父级元素样式中定义overflow：hidden

html代码：

css代码：

效果图：

原理：使用overflow：hidden时，父级元素不用定义高度，父级元素会自动获取浮动区域高度。

优点：代码少、简单易掌握、支持性好。

缺点：不能和position结合使用，会将超出部分隐藏。

建议：建议使用，但尽量避免和position同时使用。

方法3：父级元素后面加空的兄弟元素，并且其兄弟元素的样式设置：clear：both

html代码：

css代码：

效果图：

原理：添加一个空标签元素，通过clear：both，让父级元素自动获取浮动元素的高度。

优点：代码少、稳定、浏览器支持好、不容易出现问题。

缺点：原理不易被理解，并且如果浮动布局多，会增加很多空标签元素。

建议:不建议使用。

方法4:父级元素定义伪类：after和zoom

html代码：

css代码：

效果图：

原理：通过伪类，让父级元素自动获取浮动元素的高度。

优点：稳定，浏览器支持好。

缺点：代码稍微多点，原理不易掌握。

建议：建议使用，添加公共类，减少css代码。

方法5：父级元素添加overflow：auto

html代码：

css代码：

效果图:

原理：父级不能定义高度，使用overflow：auto，浏览器自动获取浮动区域高度。

优点：简单、代码少、支持好。

缺点：容易出现滚动条。

建议：不建议使用，容易出现滚动条。