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

一、浮动样式

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

Float设计初衷：文本环绕

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

p元素感受不到浮动元素

1、浮动属性值：

• left：向左浮动
• right：向右浮动
• none：不浮动
• inherit：继承父元素的浮动属性

2、浮动元素产生的问题：

1. 高度坍塌问题：

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

2. 清除浮动问题：

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

解决方法：

• 使用clear属性清除浮动：可以在父元素或浮动元素后面添加一个空元素，并将其设置为clear:both，这样就可以清除浮动。但是这种方法会产生无用的标记，不利于HTML和CSS的优化。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
1
2
3
4
5

• 使用overflow属性（BFC）：将父元素的overflow属性设置为auto或hidden，可以包含子元素的浮动，防止其父元素高度坍塌。

.container {
  overflow: hidden;
}
1
2
3

• **使用CSS伪元素:**before或:after：可以使用CSS伪元素来清除浮动，而不用添加无用的标记。

.container::after {
  content: "";
  display: block/table;
  clear: both;
  zoom：1;  (兼容)
}
1
2
3
4
5
6

• **使用flex布局：**使用flexbox布局可以更容易地控制元素的位置和大小，而不需要使用浮动。

.container {
  display: flex;
  flex-wrap: wrap;
}
1
2
3
4

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

.clearfix:before，
.clearfix:before{
	display:table;
	content:"";
	clear:both;
}
1
2
3
4
5
6

九、定位样式

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