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;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 浮动对元素产生的影响 .dv1,.dv2,.dv3{width:200px;height:200px;}.dv1...
    sheng520阅读 188评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,736评论 1 45
  • 一组 二组 三组 四组 五组 六组
    121赵丽阅读 240评论 0 2
  • 每次听刘老师讲课都觉得时间过的好快,今天刘老师用一个实际的例子让我们去找难得,也就是训练我们的思维模式! ...
    坚持是最好的成长阅读 74评论 0 0