css那些事儿3 列表与浮动

一  列表

列表默认为行内块元素，具有宽高，当一个非块元素是无法应用宽高的，比如a

1 有序列表

有ol li组成，其中li为列表项，列表的ol子元素务必为li元素标签，li子内容支持列表任意嵌套，有序列表常常会显示1,2,3按照升序或者降序方式的序号，该序号通过list-style-type指定

2 无需列表

与有序列表差异在于有无顺序上，至于显示样式上则通过css进行相应设置

3 自定义列表

dl，dt，dd，dt常常代表一个列表项的标题，而dd代表该标题对应的详情的意思

4 列表常用语下拉菜单，选项卡，图片轮播等组件的基础，可以说列表应用是非常广泛的

二 浮动

1 浮动

可以简单理解为将元素标签向左或向右放置位置，浮动会打破文档布局流，不受容器控制

2 清除浮动

2.1 在浮动元素标签后面的相邻标签设置css属性clear：both来清除前面的浮动

这种方式增加了元素标签

2.2 使用br标签的属性clear=“all”来清除浮动，同样的道理也增加了文档元素标签，不利于css设置分离和后期维护

2.3 将容器的显示方式设置为table，如display：table；这种方式由于存在浏览器差异性非常明显，是一种比较差的清除方式

2.4 在容器标签应用类，如div_clear{clear:both},这种在不改变文档结构的情况下附加清除浮动，但是对于子标签不再使用浮动时候显得有一点多余

2.5 使用伪对象：after；是一种比较好的方式，如 div:after{display:block;visiablity:hidden;content:"";line-height:0;font-size:0;clear:both}。使用伪对象在浮动元素后面应用清除浮动是一种比较可选用的方式

2.6 让容器也浮动：然后在最后真正不适用浮动的地方下一个元素主动清除浮动，这是一种非常不好的方式，因为都浮动了难以控制