内联元素与块状元素
内联元素：
- 和其他元素在同一行上，不独占一行；
- 元素的高度、宽度及顶部底部边距不可设置；
- 元素的宽度就是元素所包含的图片或文字的宽度，不可设置；
- 内联元素可以通过
display: block;显示为块状元素。
块状元素：
- 块级元素独占一行；
- 元素的高度、宽度、行高以及顶和底边距都可设置；
- 元素宽度在不设置的情况下，和父元素宽度一致；
- 块状元素可通过
display: inline;显示为内联元素。
内联块状元素：
- 和其他元素在同一行上，不独占一行；
- 元素的高度、宽度、行高以及顶和底边距都可设置；
- 可通过
display:inline-block;将其他元素设置为内联块状元素。
元素列举：
内联元素：
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>块状元素：
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>内联块状元素：
<image> <input>文档流中float属性与内联、块状元素的关系
可以将文档流理解为将window自上而下分成许多行，并在每行中按照从左到右依次排放元素。修改元素float属性使其浮动后元素将脱离文档流。在此基础上解释以下两个例子：
将属性为
block1的元素浮动后，该元素脱离了文档流，而属性为block2的元素作为块状元素和浮动元素并不在同一行，因此被浮动元素覆盖了。将属性为
block2的元素调整为行内块状元素后，它在文档流中就变成了和浮动元素处在同一行的元素，因此在显示时绕开了浮动元素。此外值得一提的是，元素浮动后，父元素在计算高度时会忽略浮动的元素，这被称作float的破坏性。