float浮动与布局

Css的背景设置：

背景简写形式 :官方没有提供固定顺讯

颜色单位：英语单词16进制rgb() hsl() transparent

background-color:red;

backgroundimage:url("https://photo.tuchong.com/395783/g/20329210.jpg");

background-repeat:no-repeat;

可以设置像素(支持正负数)，可以设置方向和百分比(left=0%,center=50%,right=100%)

background-position:50%;

多背景,多个属性用逗号隔开

background-color:red;

backgroundimage:url("https://photo.tuchong.com/395783/g/20329210.jpg"),url("http://tse1.mm.bing.net/th?id=OIP.IbYQdbyj5ZaYJvDLgS4oYAEYEY&w=300&h=300&p=0&pid=1.7"),url("");

背景设置：

background-color:transparent;背景颜色为透明

background-image:url()背景图片设置

background-repeat: repeat-x | repeat-y |no-reoeat;背景平铺设置

background-position: x y;背景定位设置

background-size:;背景尺寸设置

float浮动：

float:left|right|none|inhret

1.设置float的元素会脱离文档流，往设置的方向进行浮动，直到遇到父级的边界或者其他的浮动元素就会停止

2.浮动的元素会脱离文档流

3.浮动的元素撑不开父级的高度

清除浮动的方法：

1.给浮动元素的父级设置高度

2.clear:left | right | both

3.伪类清浮动

content:before|after{

            content:””;

           display:block;

          clear:both;

}

float属性对块级元素的影响

1.设置浮动之后，块级元素的宽度不再跟随父级宽度，而是内容决定(内容撑开宽度)

2.float元素对行级元素的影响

3.可以设置尺寸以及盒模型