标题文档流与浮动

浏览器的排版是根据元素的特征（块和行级），从上往下，从左往右排版。这就是标准文档流。

      浮动 float:left/right;

效果:元素都加浮动，后面的元素会紧跟这前面的元素并排排列。

 

    A,只要加了float，这个元素就会脱离标准文档流。

 

      第一个加了float，离了标准文档流，对于浏览器来说，第二个元素就变成了标准文档流中的第一个，于是就会把他排在第一位。而第一个依然存在，所以就会叠加。

 

      行级加float：行级元素加了float，脱离标准流，块不像块，行不像行，能设置宽高，能并排排列。Display就没有任何意义了。

 

   B,浮动的元素会紧紧贴靠在一起

 

   C,浮动的元素会文字环绕

 

拓展：使元素脱离标准流的方法

 

1.        浮动 float

 

2.        绝对定位position:absolute；

 

3.        固定定位position:fixed;    fixed固定的

浮动带来的坏处：给元素加了浮动，撑不起父级的高度了。

 

清除浮动

 

1.        给浮动的父元素添加高度

 

2.        给父级添加overflow:hidden;

 

3.        给浮动元素的后面添加一个空的div 添加样式为clear:both

 

4.        给浮动元素的父级添加一个类叫clearfix

          .clearfix：after{

　　　　　　　　　　content：“”；

　　　　　　　　　　display：block；

　　　　　　　　　　clear：both；

　　　　　　　　　　height：0；

　　　　　　　　　　visibility：hidden；

　　　　　　　　}