html+css学习笔记2（文档流和浮动）

文档流：
处在网页的最底层，创建的元素默认都处在文档流中。
元素在文档流中的特点：

• 块元素：
  1，在文档流中独占一行，块元素自上向下排列；
  2，块元素在文档流中默认宽度是100%，默认高度被内容撑开。
  

• 内联元素：
  1，内联元素在文档流中只占自身大小，默认从左到右排列，内容满一行自动换到下一行。
  2，内联元素在文档流中宽度和高度都默认被内容撑开
  
  当元素宽度值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。
  
  浮动：

  float:使元素浮动，块元素在文档流中默认垂直排列，若要改为在页面水平排列，可使块元素脱离文档流。可选值：none （无浮动 默认）、left （向左侧浮动）、right（向右浮动）、inherit（从父元素继承） 。

  1，为元素设置浮动后，元素脱离文档流，文档流中的位置空出来，下边的元素向上移动，尽量向左上或右上浮动，直到遇到父元素边框或者其他浮动元素。
  
  
  
  
  2，浮动元素比文档流高一层。
  
  3，如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
  
  4，如果一行容不下浮动元素，则自动换行。
  
  5，浮动元素不会超过它上边的兄弟元素，最多是一边齐。
  
  6，浮动的元素不会盖住文字，文字会自动环绕在浮动元素周围。
  
  7，块元素脱离文档流后，高度和宽度都被内容撑开，内联元素脱离文档后会变成块元素。
  
  
  
  补充:display:inline-block;