h5 浮动布局及首字下沉

将两天的结果放在github上。

https://github.com/SuYaru/Pre

一、浮动

        浮动就是内容悬浮于普通流（文档流）之上，普通流的文件会围绕在浮动块的周围。div:nth-of-type(x){} 指定从上到下的div，赋予属性值。

        1）普通流：常规的页面布局。2）浮动：一个元素浮动，剩余的内联框浮在它的周围。

         当包含框中的浮动元素高度大于包含框而包含框又未能及时伸长时，出现“高度塌陷”。准确的说应该叫“闭合浮动”，不是清除浮动。闭合浮动就是为了解决“高度塌陷”问题。下面主要是闭合浮动的方式：

1）加一个div。设定clear:both

2)  加一个br。<br clear="all">  clear属性有：left  |  right  | all  |  none 

3)  包含框设置 overflow:hidden 或者 overflow: auto 属性。hidden 在浮动内容增加时不显示，而auto 会多出滚动条

4）包含框设置  display :table。会改变盒模型，得不偿失。

5）使用after 元素，但只适用IE/Mac ，普适性极低。

综上，如果是IE8+，firefox，chrome，safari 这些浏览器，可以用 1、2方法闭合浮动。是其他浏览器，可以用3、4、5方法。

 

二、首字下沉

    首字下沉可以看我的codepen(https://codepen.io/suyaru/pen/wjJXKZ)。这里主要用到两个伪元素 :: first-line 和 ::first-letter。对元素的第一行或第一列设置属性。而在上面链接中的例子可以看出，uppercase 并没有将第一行的元素全部设置成大写，只有第一个字母。而其他属性，都可以在行中设定。

       

    first-line 中可以设定的属性只有一些，block 、inline-block、list-item 、table-cell或table-caption中有用