css浮动原理和工作方式,会产生什么影响呢,要怎么处理?

2018-04-3008:35:53网页制作Comments2,726 views字数 407阅读模式

工作方式:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3379.html

影响:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3379.html

  • 浮动会导致父元素无法被撑开,影响与父元素同级的元素。
  • 与该浮动元素同级的非浮动元素,如果是块级元素,会移动到该元素下方,而块级元素内部的行内元素会环绕浮动元素;而如果是内联元素则会环绕该浮动元素。
  • 与该元素同级的浮动元素,对于同一方向的浮动元素(同级),两个元素将会跟在碰到的浮动元素后;而对于不同方向的浮动元素,在宽度足够时,将分别浮动向不同方向,在宽度不同是将导致一方换行(换行与HTML书写顺序有关,后边的将会浮动到下一行)
  • 浮动元素将被视作为块元素
  • 而浮动元素对于其父元素之外的元素,如果是非浮动元素,则相当于忽视该浮动元素,如果是浮动元素,则相当于同级的浮动元素。
  • 而常用的清除浮动的方法,则如使用空标签,overflow,伪元素等。在使用基于浮动设计的CSS框架时,自会提供清除的方法,个人并不习惯使用浮动进行布局。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3379.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/3379.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定