浮动:重要
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; /*清除元素两端的浮动*/