css学习之浮动

1.传统网页布局的三种方式

• 普通流     标签按照规定的默认方式排列
• 浮动       可以让多个块级元素一行内排列
• 定位

2.浮动特性

浮动的元素最重要的特性：

1、脱离标准普通流的控制，移动到指定位置；

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

3、如果多个盒子都设置了浮动，则会按照属性值在一行内显示。浮动的元素相互贴靠在一起，不会有缝隙；如果父级元素的宽度装不下这些浮动元素，就会另起一行。

4、元素在添加浮动特性之后，就拥有了行内块元素的特点。

为了约束浮动元素，在网页布局时，先设置一个父级元素，再在父级元素中设置浮动盒子。

3.清除浮动

为什么要清除浮动：

        浮动元素装在一个父元素中，但父元素设置固定的高度需要写死，对于子浮动元素很多的情况不灵活。   父元素中的子盒子浮动不占有位置，父元素的盒子高度为0，会影响下面的标准流盒子。

清除浮动的本质是什么？

        清除浮动就是清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动；清除浮动之后，父级会根据浮动的子盒子自动检查高度，父级有高度就不会影响下面的标准流的排版了。

清除浮动的方法：

1、额外标签法：

在浮动元素末尾添加一个空标签。标签样式为 clear：both，要求新的空标签必须是块级元素。

2、父级添加overflow属性

将overflow属性值设置为hidden、auto或scroll

3、:after伪元素法

给父元素添加     

 4、双伪元素

给父元素添加