前端(六)——CSS之浮动和定位

1. 浮动 Float

• 定义：是元素的一种属性，设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程，可以让任何盒子在一行排列，用浮动来布局。
• 标准文档流：文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行，并在每行中从左至右的顺序排放元素。造成空白折叠、高矮不齐，底边对齐以及自动换行等现象。
• 格式：选择器 { float：属性值；}
  属性值：left——元素向左浮动；right——元素向右浮动；none——元素不浮动（默认值）
• 特性：①脱离标准流，不占位置，只有左右浮动；②一浮动就创建一个包含块级的概念，在外边加一个父盒子，再对齐；③若上一个元素浮动则与其在顶部对齐，若上一个元素是标准流则上下排列。
• 块级元素：独占一行 如h1~h6 p div 列表…
  行内元素：不独占一行 如span a img strong…
  行内元素可以被包含在块级元素中，反之则不可以
• display：block 显示为块元素 / inline 显示为行内元素 / inline-block 显示为块元素，但是可以内联，在一行 / none 元素不会被