CSS学习笔记(一)

什么是文档流？

 

  对一个网页而言，body 元素下的任意元素，根据其前后顺序，组成一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。

 

什么是浮动？

 

  float具有属性值（ left\right\none ），当设置了 float 属性后，浮动元素会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。

为什么要清除浮动？

 

  为了防止浮动溢出

 

什么是浮动溢出？

  当容器的高度(height)为auto，且容器的内容中有浮动动(float/right)的元素，在这种情况下，容器不能自动伸长以适应内容的高度，使得内容溢出容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

 

 

如何清除浮动？

1. 使用<div class="cls"></div>，样式：.cls{clear:both};，这样的缺点是会导致多余代码出现。
2. 以容器标签就用 overflow:atuo;为了兼容IE6，还需要加上zoom:1;
3. 使用after伪对象清楚浮动。该方法只适用于非IE浏览器。#layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} 

 

随时性地对父级元素清除浮动被 认为是书写CSS的良好习惯。