CSS基础【4】—浮动总结

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

一、标准文档流

• 什么是文档流?

   文档的流向  文档默认的排布方式
  

• 什么是标准文档流?

   每一类标签属性不同  默认的文档流向也不同
  	 （1）块级元素：从上到下
   	 （2）行内块：从左往右  自动换行
    	 （3）行内元素：从左往右  自动换行
  

二、元素的浮动属性

元素的浮动属性： float 可以让当前元素 脱离标准文档流(脱标)

float:left(左浮动)||right(有浮动)

浮动的规则或作用：

• 浮动找浮动，不浮动找不浮动

• 浮动只影响后面的元素

• 浮动以元素顶部为基准对齐

• 浮动可是实现模式转换（span 设置浮动可以设置宽高）

  浮动会让元素具有行内块的特点(不管原来是什么元素 都会具有行内块特点)

• 让块级元素在一行显示

三、浮动带来的影像以及清除浮动

1.浮动带来的影响:

(1)对后面元素的影响：

     一旦浮动以后,当前元素不再占位 那么后面元素会出现补齐情况，导致其他布局混乱

(2)对后面的文字产生的影响：

	文字出现了环绕效果 或者出现文字被挤出元素之外

(3)对父元素产生的影响：

	 一旦所有子元素都浮动了，那么父元素如果自己本身没设置高度，那么父元素将没有高度

2.清除浮动:

(1)给父元素添加一个高度

.parent{
	height:300px;
}

(2)给父元素添加一个 块级格式上下文

.parent{
	overflow:hidden;
}

(3)给父元素添加浮动

.parent{
	float:left;//同浮动元素的浮动类型
}

(4) 给浮动元素后面的元素添加clear属性
clear:left ：清除左浮动带来的影响
clear:right：清除右浮动带来的影响
clear:both：清除所有浮动带来的影响-----用的最多

//浮动元素后面元素的类名
 .clearfloat{
      	   width:0;
           height:0;
           line-height:0;
           //当前元素隐藏
           visibility:hidden;
           display:block;
           clear:both;
	}

(5)利用css3选择器去清除浮动

 .parent:after{
        content:"";
        width:0;
        height:0;
        line-height:0;
        visibility:hidden;
        display:block;
        clear:both;
    }
    .parent{
        /*为了兼容IE浏览器*/
           zoom:1;

    }