float--浮动

1.float详解第一部分：

float属性值为：left（左），right（右），none（不浮动）；在float产生之初，主要是用来做文字环绕的效果的，根据float的属性设定图片的浮动位置。（备注：在写img标签的时候，一定要加上alt属性）

2.float详解第二部分：

设置了float属性的元素会脱离文档流，往我们所设置的方向进行浮动，直到遇到其父级的边框，或这是浮动的方向上已经存在了一个浮动元素，它才会停止偏移。与此同时，已经浮动的元素是没有办法撑开其父级的高度的，我们可以给父级加上一个高度属性，这也是清除浮动的一种方法。清浮动的三种方法：①给父级加高②给浮动的元素的后一个元素添加clear属性，属性值为：left,right,both;根据具体情况判断应该用哪个属性值。③在元素的后面再添加一个元素（标签），添加的标签的CSS样式可以这样写{content:''";display:block;height:0;clear:both;}。考虑到代码的复用问题，我们可以在样式表中写一个基础样式，方便随时清浮动，即，在CSS中定义一个类的样式，代码为：.clearfix::after{content:''";display:block;height:0;clear:both;}，然后在浮动元素的父级class属性中添加相应的class名，例如<div class='outer  clearfix'>

<div></div>

<div><div>

</div>  考虑到IE浏览器兼容性的问题，我们可以在CSS样式表中加上一句样式 .clearfix{zoom:1;},这个是清浮动最好的一种方法。

3.float详解第三部分：

①float属性对块级元素的影响：设置浮动之后，块级元素的宽度不再继承其父级，而是由内容撑开。

②float属性对行级元素的影响：设置浮动之后，行级元素可以进行宽度盒高度的设置

③总结：设置浮动之后，行标签或块标签转换成了inline-block标签。

4.伪元素:

①div（元素名或类名或id名等等）::before{},表示在元素之前插入一个伪元素

②div（元素名或类名或id名等等）::after{},表示在元素之后插入一个伪元素，通常用来清浮动。注意：这里的规范是写两个冒号，要与:hover...,伪类选择器区分开。

附加：

5.外边距重叠，即相邻连个元素的边距属性在反向上发生冲突，比如div1的margin-bottom和div2的margin-top或者是div1的margin-right和div2的margin-left会发生冲突，此时，①如果两个值都为正数，则取数值较大的一个值作为两个元素的最终的距离值，若都为负值，则取绝对值较大的一个数作为最终的距离值，若一正一负，则取连个数相加的结果作为最终的距离值。

6.背景设置：

①background-image：url();括号内为图片路径，这里可以设置多背景，即可以在这里写多个url，只需要用逗号隔开就行。

②background-color：颜色设置，可以为#加16进制数，可以是英文单词，可以是rgb(),也可以是hsl();hsl()写法同rgb(),只是这种方法是用色调来写颜色。注意，这里的背景颜色的设置，与加入背景图片之间是不会冲突的。

③background-position：（可以设置像素，也可以是百分比的形式，50%刚好居中，也可以用left/right/center | top/bottom/center 来分别设置上下盒左右的居中）。例如:background-position：center center;就是元素处于正中间的位置。

④background-repeat:no-repeat（不平铺，图片原来什么样就什么样）；repeat（不断重复一张图片，直至充满整个元素）；repeat-x(在x轴方向上平铺，即在x轴上重复)；repeat-y(在y轴上平铺)

⑤background-size:设置背景图片的大小，可以用百分比来写，有两个值width  height = 50% 50%；也可以是background-size:cover;此时图片会充满整个元素，但是不会重复 ，还是一张图片。还可以是background-size:contain;此时图片按比例缩放，宽度或者高度，只要有一个属性碰到了元素的边界，图片就停止缩放，所以这种方法写的图片有时并不会充满整个元素。