清除浮动的几种方法课件.pptVIP

CSS清除浮动 主讲：王玉刚 浮动（float） --是个经典又诡异的一个属性 浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果 float:right Clear属性 如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性 clear : none | left |right | both clear参数值说明： none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 　不允许左边有浮动对象 right : 不允许右边有浮动对象 解决方法 清除浮动 是每一个 web前台设计师 必须掌握的机能。 1、对父级设置适合CSS高度 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单，代码少，容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 评分：★★☆☆☆ 2、结尾处加空div标签 clear:both 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取