CSS学习——浮动

一、为什么需要浮动？

很多网页布局效果没法使用标准流来实现。

注：网页布局的第一准则—多个块级元素纵向排列找标准流、多个块级元素横向排列找标准流。

浮动（ float ）

语法： 选择器 { float ：属性 ；}

属性	描述
none	默认值，不浮动，为常规流
left	靠上靠左排列
right	靠上靠右排列

二、浮动的特性 

1、浮动元素会脱离标准流 （脱标）

2、浮动元素会一行显示并元素顶部对齐

3、浮动元素会有行内块元素特性

设置了浮动的元素重要特性？

1、脱离标准流控制，移动到指定位置。

2、浮动盒子不再保留原先位置。

浮动元素经常搭配标准流的父元素 

浮动布局的注意 

1、浮动盒子与标准流父盒子搭配

先用标准流父元素排列上下位置后内部子元素，采取浮动排序左右

2、一个元素浮动，它的兄弟元素都浮动

三、清除浮动

清除浮动方法：闭合浮动

语法 ：

选择器{ clear ：属性值 }

属性	描述
left	清除左
right	清除右
both	全清除

几乎只用：clear ： both ；

清除浮动方法：

1、额外标签法（隔墙法）

2、overflow

3、 ：after

4、双伪元素 

1、额外标签法

在浮动标签后加空标签：

<div class=" one"> /<div>

或加其他标签如<br/>等

优点：易懂      缺点：结构化差

注：空标签必须为块级元素。

2、overflow

给父级元素加overflow 属性为 hidden auto 

3、：after 伪元素  （加给父元素）

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix  {
            *zoom: 1;
        } 

3、双伪元素 

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }