2019-04-07

/左浮动/
float:left;
/清除浮动方法一/
/.clear{
clear:both;清除浮动两端所带来的影响
}/
/清除浮动方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //给父元素添加/
/ overflow:auto;
} /
/清除浮动的方法三/
/ .box{
height:200px;
} /
/清除浮动方法四 伪类/
.box:after{
content:'';/在box后面添加内容为空/
display:block;/把添加的内容转换成块元素/
lear:both; /清除元素两端的浮动*/
}

浮动：重要
table div+css
页面布局方式

 浮动：
     1.浮动会将元素排在文档流之外，脱离文档流
     2.如果一个元素浮动了，不占据页面空间了
     3.其余在文档流之内的元素要上前补位

 属性：float:
 取值：
      none   默认值
      left   向左浮动
      right  向右浮动

 作用：能让块元素显示在一行


 清除浮动： 
    1.浮动元素后面添加空元素

/去掉li的点/
li{
list-style:none;
}
a{
/颜色/
color:#fff;
/去掉下划线/
text-decoration:none;
}
ul{
/背景颜色/
background:orange;
width:1200px;
/让ul居中/
margin:0 auto;
height:40px;
/文字垂直居中/
line-height:40px;
}
li{
/浮动/
float:left;
width:100px;
/* border:1px solid #000; /
/文字水平居中/
text-align:center;
/清除浮动方法一/
/.clear{
clear:both;清除浮动两端所带来的影响}*/

/清除浮动方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //给父元素添加/
/ overflow:auto;} */

/清除浮动的方法三/
/* .box{height:200px;} /
/清除浮动方法四 伪类 推荐使用/
box:after{
content:'';/在box后面添加内容为空/
display:block;/把添加的内容转换成块元素/
clear:both; /清除元素两端的浮动/
/去掉li默认的点*/
list-style:none;