CSSDay06

标准流文档

宏观来讲，web页面布局类似于“织毛衣”，是从上往下布局的

主要特性

1. 空格折叠，无论多少个空格都会折叠

2. 高矮不齐，底边对齐

3. 自动换行，一行写不满就另起一行写

4. 行元素与块元素等级森严，行元素必定占领一行，块元素不能设置高度和宽度

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动

• （2）绝对定位

• （3）固定定位

浮动

主要特性

• 脱标：即脱离标准流，不受行元素和块元素的限制， 如果设置了浮动，那么不管他是div还是span，都可以设置高度和宽度了

• 浮动的元素相互贴靠

• 浮动的元素有字浮的效果

• 收缩 如果只是设置了高度，那么宽度就会随着内容的大小和多少而决定

浮动的清除

• clear:both;

  clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

  这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

  margin失效的本质原因是：上图中的box1和box2，高度为零。

• 隔墙法（内墙法）

  

• 清除浮动方法4：overflow:hidden;

  上图显示，overflow:hidden;的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：

  一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

 

 

更详细请见浮动详解