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无论给多大,层级都不会高于子元素

相关推荐
我登哥MVP18 分钟前
Ajax 详解
java·前端·ajax·javaweb
sulikey21 分钟前
【Linux权限机制深入理解】为何没有目录写权限仍能修改文件权限?
linux·运维·笔记·ubuntu·centos
十安_数学好题速析24 分钟前
倍数关系:最多能选出多少个数
笔记·学习·高考
非凡ghost43 分钟前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙1 小时前
/dev/null 是什么,有什么用途?
前端·chrome
Hello_Embed1 小时前
STM32 环境监测项目笔记(一):DHT11 温湿度传感器原理与驱动实现
c语言·笔记·stm32·单片机·嵌入式软件
JamSlade2 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保2 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12152 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux2 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习