CSS布局技巧（二） ｜ 青训营

前言

上一篇文章中介绍了css布局中的弹性盒子和网格。其实css布局技巧还有很多，今天介绍浮动和定位。

浮动

浮动的概念

浮动是指的是css的属性float。float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了”，位置发生变化，不按HTML代码中排列。从定义上理解，即该元素脱离了文档流（常规流）。

CSS 语法

float: none|left|right|initial|inherit;

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

所有 CSS 浮动属性

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear	指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float	指定元素应如何浮动。
overflow	指定如果内容溢出元素框会发生什么情况。
overflow-x	指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y	指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

应用场景

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等…
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

实操实践

图像并排

.img-container {
  float: left;
  width: 33.33%; 
  padding: 5px; /* 如果需要在图片间增加间距 */
}

定位

定位的概念

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

• static
• relative
• fixed
• absolute
• sticky

应用场景

重叠元素,定位图像中的文本,设置元素的形状等等。

实操实践

设置元素的形状，元素被裁剪为这种形状并显示。

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}

以上就是本篇文章的全部内容，如果本篇文章有错误或问题，欢迎指正，谢谢！！！