《HTML5+CSS3响应式Web开发》课件——2.float浮动.pptxVIP

理解标准文档流概念掌握float浮动定位属性熟悉float定位清除设置

浮动定位实现的效果

标准文档流概念

标准文档流概念标准文档流概念标准文档流指的是在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML就是一种标准文档流文件。

标准文档流概念高低不齐、底边对齐效果微观现象空白折叠现象自动换行

标准文档流概念元素等级块级元素行内元素行内块元素

浮动定位属性

脱离标准文档流的方法方法一：浮动方法二：绝对定位方法三：固定定位

浮动定位属性浮动定位概念元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到指定位置的过程。

浮动定位属性脱离标准流任何元素都可以浮动浮动的元素互相贴靠一起的

浮动定位属性float浮动属性在CSS中，通过float属性定义浮动，语法如下：选择器{float:left|right|none|inherit}

浮动定位属性

浮动定位清除设置

div与/div之间相当于一个容器，div中还可以嵌套多层div。浮动定位清除设置为什么清除浮动？

浮动定位清除设置父盒内不存在其他普通流元素，浮动后出现高度塌陷的情形。

清除浮动的方法一额外标签法，是W3C推荐的做法，是通过在浮动元素末尾添加一个空的标签，应用clear：left/right/both。浮动定位清除设置

清除浮动的方法二父级添加ov