浮动

## 浮动

　　网页布局第一准则 : 多个块级元素纵向排列找标准流, 多个块级元素横向排列找浮动

　　什么是浮动?

　　　　float 属性用于创建浮动框, 将其移动到一边, 直到左边缘或右边缘触及包含块或另一个浮动框的边缘

　　　　语法 :

　　　　　　选择器{ float : 属性值;}

　　　　　　　　属性值 : left , right  左浮动 , 右浮动

 

　　* 浮动的特性

　　　　1. 浮动元素会脱离标准流

　　　　　　* 浮动的盒子不再保留原先的位置

　　　　2. 浮动的元素会一行内显示并且元素顶部对齐

　　　　3. 浮动的元素会具有行内块元素的特性

 

　　* 注意 :

　　　　* 在一行显示, 三个div都要设置浮动属性 , 如果多个盒子都设置了浮动, 则它们会按照属性值 一行内显示并且顶端对齐排列

　　　　* 浮动的元素是互相贴靠在一起的(不会有缝隙) , 如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐

　　　　* 任何元素都可以浮动, 不管原先是什么模式的元素, 添加浮动之后具有行内块元素相似的特征

　　　　* 如果块级盒子没有设置宽度, 默认宽度和父级一样宽, 但是添加浮动后, 它的大小根据内容来决定

 

　　* 浮动元素经常和标准流父级搭配使用

　　　　* 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置 , 符合网页布局第一准则

　　　　

## 清除浮动

　　* 清除浮动的本质是 清除浮动元素造成的影响

　　* 如果父盒子本身有高度, 则不需要清除浮动

　　* 清除浮动之后, 父级就会根据浮动的子盒子自动检测高度, 父级有了高度, 就不会影响下面的标准流了

　　语法 :

　　　　clear : 属性值

 

　　清除 浮动方法

　　　　1. 额外标签法

　　　　　　* 找到最后一个元素 元素末尾添加一个新标签< div style = " clear : both"></div>

　　　　　　　　* 注意 : 要求这个新的空标签必须是块级元素

　　　　2. 父级添加 overflow 属性

　　　　　　* 可以给父级添加 overflow 属性 , 将其属性值设置为 hidden , auto 或 scroll

　　　　3. 父级添加 after 伪元素

　　　　　　* 记住代码

　　　　4. 父级添加双伪元素