position和float的使用小结

1、position用于对元素进行定位,position属性规定了元素的定位类型,使用left、right、bottom、left进行具体位置的调整,position属性有absolute、relative、fixed、static等属性。

使用的时候有以下几点需要注意:

  • absolute 是相对于声明了relative的父元素来进行定位的,父元素不局限于浏览器窗口
  • fixed只能相对于浏览器窗口进行定位。
  • 当子元素设置position: absolute;并且他的父元素没有设置position: relative;时(之前的理解是,这时候子元素应该自动相对于body定位的)这时如果没有设置left、top、right、bottom等值的话,子元素依然还会位于他的父元素的(0,0)的位置,即子元素这时的位置默认不是(0,0)而是他自己在原来文档流中的位置。
.position-box{position: absolute;}/*子元素如果不设置left、top、bottom等值的时候
                   元素默认是在原来的位置,而不是相对于body定位在(0,0)的位置*/

2、float 定义元素在哪个方向浮动,元素的浮动只能在父元素范围内浮动,使用很普遍,如横向菜单栏的实现。

使用的时候有以下几点需要注意:

  • 布局的时候,float和position以及margin、padding可以同时使用不存在冲突(前提是下一个元素已经清除了浮动,否则设置间距无效)。
  • 元素使用float之后,元素会脱离文档流,这时候父元素会不占高度,下面的元素则默认会在使用float元素的文档位置,如果想让父元素占高度,可以给父元素添加属性display: table;即可还可以写一个空的公共div,专门用来清除浮动。如:
.clear-float{clear: both;}/*可以作为公共样式使用*/
.parent{display: table;}/*这时父元素的高度会被撑开,设置背景颜色可以看得到*/
  • 给父元素添加属性display: table;之后,父元素才可以具有高度,所以如果在需要给父元素设置特殊颜色的时候,可以使用display: table;其他情况使用clear来清除浮动。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 4,988评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 9,043评论 1 19
  • 一、字义不利于婚姻感情的名字 有的名字,选用了一些字义不吉利的字,或者是两个字组合起来,产生了不利于婚姻感情的寓意...
    运安阁阁主阅读 3,262评论 0 0
  • 一、安装 1.检查安装依赖程序 yum install gcc- c++yum install -y tcl yu...
    Shaun_lan阅读 1,103评论 0 0

友情链接更多精彩内容