学习前端第六天笔记记录——标准流与浮动

14）标准流
1、概念：就是标签按照规定好的默认方式排列
2、  · 块级元素会独占一行，从上到下顺序排列
          常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table等
       · 行内块元素会按照顺序，从左到右排列，碰到父元素自动换行
          常用元素：span、a、i、em等

15）浮动
1、浮动的作用：可以改变元素标签的默认排列方式
2、典型应用：可以让多个块级元素一行内排列显示
3、网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

4、什么是浮动：用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
5、语法：  选择器 {float：属性值；}
6、属性值：    none（元素不浮动，默认值）              left（元素向左浮动）
                       right（元素向右浮动）
7、浮动的特性（重难点）：

· 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
 · 浮动的盒子不保留原先的位置
  （设置了浮动的元素，漂浮在普通流的上面，不占位置，脱标）
· 如果多个盒子设置了浮动，则会按照属性值一行内显示并且顶端对齐排

  （浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出        的盒子会另起一行对齐）
· 浮动的元素会具有行内块元素的特性。
   （如果行内元素有了浮动，则不需要转换为块级元素或行内块元素就可以直接设置高度和宽度
   （如果块级盒子没有设置宽度，默认宽度和父级元素一样宽，但是添加浮动后它的大小根据内容        来决定）
   （行内元素同理）
8、浮动元素经常搭配标准流父级元素使用
· 为了约束浮动元素的位置，我们一般采取的策略是：
          先使用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置（符合网页            布局第一准则）
· 设置子元素的浮动时，需要设置盒子与盒子之间的间隙的时候，最后一个盒子可以不加外边距，     可以用类选择器对最后一个标签单独说明一下（要注意权重，注意他是否能被执行）