HTML重要概念

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

标准流（普通文档流）

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

 float: left; 左浮动，标签向左浮动
        float: right;右浮动，标签向右浮动
        float: none;不浮动，默认值，并且会显示在其文本中出现的位置

        浮动特性：

        1.浮动元素脱离正常标准流不脱离文本流
        2.浮动元素不占位，父级盒高度为零
        3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行
        4.使行级标签支持宽高
        5.提升层级

行内块元素特性总结

• 可以设置宽高

• 默认横向显示——默认水平布局，相邻的行级元素会在同一行显示，直到一行排不下，才会换行；

• 换行和空格会被解析

• 具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距。

块级元素特性总结

• 没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开

• 默认独立成行——默认垂直布局

• 具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距。

行内（行级）元素特性总结

• 宽度默认由内容撑开

• 高度默认由内容撑开

• 默认横向显示——默认水平布局，相邻的行级元素会在同一行显示，直到一行排不下，才会换行

• 换行和空格会被解析

• 不能设置宽高

• 只能设置左右的外边距，不能设置上下的外边距

• 可以设置上下左右的内边距和边框。

• 行内元素只能容纳文本或者其他行级元素（此处请注意，不要在行级元素中嵌套块级和行内块元素） 。