CSS清除浮动

清除浮动的原因

	一般是对父元素盒子里的子元素使用float浮动属性，导致父级对象盒子不能被撑开。

1、边框不能撑开
CSS代码：

如图所示，由于子元素浮动导致父元素无法获取子元素高度，导致了黑色盒子不能被撑开，造成高度塌陷。
2、背景不能显示
CSS代码：


如图所示，由于浮动产生，如果对父元素设置了背景色，而父元素不能被撑开，导致背景不能显示出来。
3、margin、padding值不能正确显示
由于浮动导致父级子级之间设置padding、margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动方法

1、给父元素设置合适的高度
给父元素设置合适的高度可以达到清除浮动的效果，前提是能确认对象内容高度并计算好。
缺点：需要知道父元素高度。
CSS代码：


2、给父元素也设置浮动属性
缺点：对后面的元素位置会产生影响。
CSS代码：


3、clear：属性清除浮动
在父元素中，追加空子级块级元素，并设置其clear属性值为 both 。
clear属性值：clear：none 不清除
clear：left 清除左浮动
clear：right 清除右浮动
clear：both 清除两侧浮动（常用）
CSS代码：

HTML 代码：


以上就是我在千锋教育逆战班学习两周涉及到的清除CSS浮动的方法。