html清除悬浮,css清除浮动什么意思

css清除浮动什么意思

css清除浮动的意思是清除元素浮动造成的影响。

一、什么是浮动？

在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行。浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框(相当于设置了display:block)，而不管该元素本身是什么。

(推荐学习：CSS视频教程)

二、为什么要清除浮动？

浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的“高度塌陷”。

浮动主要影响有以下几个方面：

● 背景不能显示

由于浮动产生，如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

● 边框不能撑开

如上图中，如果父级设置了CSS边框属性(css border)，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

● margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！