共计 1942 个字符，预计需要花费 5 分钟才能阅读完成。
块级元素与行内元素，怎么用 CSS 控制它们、以及如何合理的使用它们
它们的定义 1. 块级元素：每个块级元素默认占一行高度，若有块级元素则同行无法再添加其他元素（float 浮动除外）特点：高度行高以及外边距内边距都可控制宽度默认 100% 可以容纳内联元素及块元素
2. 行内元素：可以和其他元素都在一行上. 特点：宽度就是它的文本或图片的宽度，不可改变内联元素只能容纳文本或者其他的内联元素设置宽度 width 无效设置高度 height 无效，可通过 line-height 来设置设置 margin 只有左右有效，上下无效设置 padding 只有左右 padding 有效，上下无效
3. 行内块状元素：综合了行内元素与块状元素的特性，但是各有取舍特点：不自动换行能够识别宽高默认排列方式从左到右
4. 块级元素有哪些：div | dl(定义列表) | h1(h 开头系列) | hr | menu | ol | p | table | ul
5. 行内元素有哪些：a | b | br | em | i | img | input | label | select | span | strong sub | textarea | u
6. 行内块状元素有哪些：button | del | iframe | ins | map | object
块级元素与行内元素，怎么用 CSS 控制它们、以及如何合理的使用它们, 通俗讲解
1. 首先要知道，div 是块级元素，在页面中独占一行，自上而下排列，也是传说中的流
由此可以看出，即使 div1 的宽度很小，页面中一行可以容下 div1 和 div2，div2 也不会排在 div1 后面，显然标准流已经法满足需求，这就要用到浮动浮动可以理解为让某个 div 元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。假设上图中的 div2 浮动，那么它将脱离标准流，但是 div1，div3,div4 仍然在标准流当中所以 div3 会自动向上移动，占据 div2 的位置，重新组成一个流。
从图中可以看出，div2 不再属于标准流，div3 自动上移顶替 div2 的位置，div1,div3,div4 依次排列，成为新的流，又因为浮动是漂浮在标准流上面的，所以 div2 挡住了一部分的 div3, 所以 div3 看起来变矮了。
如果把 div2 右浮动，我们看的是这个效果：
下面我们把 div2 和 div3 都加上左浮动，效果如图：
同理，由于 div2,div3 浮动之后，div3 会跟随在 div2 之后，但是从以上的每个例子中，div2 都是浮动的，但是却没有跟在 div1 之后，因此可以得到一个重要结论：div 元素 A 是浮动的，如果 A 元素上一个元素也是浮动的，那么 A 元素会跟随在上一个元素的后边（若是一行放不下的情况，则会被挤到下一行）; 如果 A 元素上一个元素是标准流中的元素，那么 A 的相对垂直位置不会改变，也就是说 A 的顶部是和上一个元素的底部对齐。假如我们把 div2, 和 div4 左浮动，效果图如下：
结论依然是：div2，div4 浮动，脱离了标准流，因此 div3 将会自动上移，与 div1 组成标准流。div2 发现上一个元素是标准流的元素，因此 div2 相对垂直位置不变，与 div1 底部对刘。div4 发现上一个元素 div3 也是标准流中的元素，因此 div4 的顶部与 div3 的底部对齐。恭喜你已经掌握了添加浮动. 现在我们来聊一下清除浮动，有上边的基础清除浮动非常理解
语法：clear: none | left | right | bothnone: 允许两边都有可以有浮动对象 left: 不允许左边有浮动对象 right: 不允许右边有浮动对象 both: 不允许有浮动对象
根据上边的基础，假如页面中只有两个元素 div1,div2，他们都是左浮动，场景如下：
这时候使用清除浮动，根据官方定义，读者可能会尝试这样写，在 div1 中的样式中添加 clear:right, 理解为不允许 div1 的右边有浮动元素，由于 div2 是浮动元素，因此会自动下移一行来满足规则。其实这种理解是不正确的，这样做没有任何效果。对于 CSS 的清除浮动 (clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。怎么理解呢？就拿上边的例子来说，我们是想让 div2 移动，但我们却是在 div1 元素的 CSS 样式中使用了清除浮动，试图通过清除 div1 右边的浮动元素 (clear:right;) 来强迫 div2 下移，这是不可行的，因为这个清除浮动是在 div1 中调用的，它只能影响 div1，不能影响 div2。根据定论，要想让 div2 下移，就必须在 div2 的 CSS 样式中使用浮动。本例中 div2 的左边有浮动元素 div1，因此只要在 div2 的 CSS 样式中使用 clear:left; 来指定 div2 元素左边不允许出现浮动元素，这样 div2 就被迫下移一行。对于右浮动也亦是如此。
参考：http://www.cnblogs.com/iyangy…
