CSS笔记——浮动float与定位position及ClearFix解决方案

一、浮动样式

CSS浮动是一种布局技术,可以让元素浮动在容器中,半脱离(p元素无效)文档流,使得其他元素可以围绕它排列。浮动属性可以用于图片、文字和其他元素的布局。

Float设计初衷:文本环绕

文本元素P和浮动天然排斥,不会重叠

p元素感受不到浮动元素

1、浮动属性值:
  • left:向左浮动
  • right:向右浮动
  • none:不浮动
  • inherit:继承父元素的浮动属性
2、浮动元素产生的问题:
  1. 高度坍塌问题:

    当一个元素浮动后,它的父元素高度会坍塌,导致其子元素不再占据父元素高度,影响整个页面布局。

  2. 清除浮动问题:

    当一个元素浮动后,其下面的元素可能会跟随其浮动而移动,导致页面布局混乱。

解决方法:

  • 使用clear属性清除浮动:可以在父元素或浮动元素后面添加一个空元素,并将其设置为clear:both,这样就可以清除浮动。但是这种方法会产生无用的标记,不利于HTML和CSS的优化。
css 复制代码
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  • 使用overflow属性(BFC):将父元素的overflow属性设置为auto或hidden,可以包含子元素的浮动,防止其父元素高度坍塌。
css 复制代码
.container {
  overflow: hidden;
}
  • **使用CSS伪元素:**before或:after:可以使用CSS伪元素来清除浮动,而不用添加无用的标记。
css 复制代码
.container::after {
  content: "";
  display: block/table;
  clear: both;
  zoom:1;  (兼容)
}
  • **使用flex布局:**使用flexbox布局可以更容易地控制元素的位置和大小,而不需要使用浮动。
css 复制代码
.container {
  display: flex;
  flex-wrap: wrap;
}

最完美的clearFix方案(解决高度塌陷,也能改变父子外边距合并)

CSS 复制代码
.clearfix:before,
.clearfix:before{
	display:table;
	content:"";
	clear:both;
}

九、定位样式

position属性有四个取值:static、relative、absolute、fixed,每个取值对应不同的元素定位方式。

  • 静态定位static

    默认取值,未脱离文档流,top、bottom、left、right等属性不起作用。

  • 相对定位relative

    未脱离文档流,但可以通过设置top、bottom、left、right属性来调整元素的位置。

    元素相对于其正常位置进行定位,不会影响其他元素的位置。

  • 绝对定位absolute:

    '子绝父相' ,绝对定位支持百分比, 定位范围相对Content +padding 区域,不会包含border区域

    完全脱离文档流,而是相对于其最近的已定位的祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的body元素进行定位。可以通过设置top、bottom、left、right属性来调整元素的位置。定位后的元素不再占据原有的空间,因此可能会覆盖其他元素。

  • 固定定位fixed:

    类似于absolute,但是元素是相对于浏览器窗口而不是文档进行定位,因此即使用户滚动页面,元素的位置也不会改变。可以通过设置top、bottom、left、right属性来调整元素的位置。

  • 粘性定位sticky

    应用:顶部导航固定,不跟随滚动

    • css定位层级

    网页是多层的3D结构。自上而下分别是:

    • 定位层级:z-index为正值
    • 定位层级:z-index为0 或auto
    • 文本层级: inline/inline-block(和浮动层级想排斥)
    • 浮动层级: float:left/right/both
    • 块级元素层级 display:block
    • 背景 层级:background

注意:父爱无边,父元素z-index无论给多大,层级都不会高于子元素

相关推荐
秋田君7 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人7 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin7 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO7 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545210 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn11 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤12 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523519 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子25 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐26 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui