12.13日总结

1、浮动与清除

1.1 Float属性

Float 会使元素向左或向右移动，其周围的元素也会重新排列。

Float 属性可以设置一下值：

1. left：元素浮动到容器左侧

2. right：元素浮动到容器右侧

3. none：元素不会浮动

1.2 clear属性

clear 属性指定元素两侧不能出现浮动元素。

clear 属性可以设置一下值：

1. none:允许两侧都有浮动元素

2. left:左侧不允许浮动元素

3. right:右侧不允许浮动元素

4. both:左侧或右侧均不允许浮动元素

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

1.3 clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外,这时，可添加元素overflow：auto。

2 display属性

2.1 隐藏元素

隐藏一个元素可以通过把 display 属性设置为"none"，或把 visibility 属性设置为"hidden"。

visibility 属性设置为"hidden" 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

display 属性设置为"none" 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

2.2 块和内联元素

块元素是一个元素，占用了全部宽度。例如：<p>/<div><ol>

内联元素:span、a标签

块级元素转化内联元素：display：inline；

内联元素转化为块级元素：display：block；

2.3 display：inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block;，将保留上下外边距/内边距，而 display: inline; 则不会。

与 display: block; 相比，主要区别在于 display：inline-block; 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。