浮动-float 和定位-position_浮动会影响后面元素的位置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52232797/article/details/111301292

本文详细介绍了CSS中的浮动-float和定位-position。浮动主要用于模块化排版，可使元素水平布局，当空间不足时自动换行。定位则用于精确像素级调整，包括relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。同时，文章提到了浮动带来的问题及解决方案，如使用clearfix类来清除浮动。此外，还探讨了CSS3的一些常见技巧，如圆角效果、透明度和阴影效果的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动-float 和定位-position

1 浮动-float

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

float:left/right

1.浮动后的元素，不论其本身是什么类型的框，都会变成块元素

<head>
  <meta charset="utf-8">
  <style type="text/css">
    a{
      float: left;
      height: 100px;
      width: 200px;
      color: white;
      text-decoration: none;
      background-color: #008B8B;
    }
  </style>
</head>
<body>
  <a href="">没有宽高</a>
</body>

2.浮动的元素在同一行没有足够的空间显示时，会自动换到下一行

div{
  float: left;
  width: 24%;
  height: 100px;
  color: red;
  margin-right: 1%;
  background-color: black;
}
div:nth-of-type(1){
  width: 30%;
}

3.浮动后的元素会遮挡下一个未浮动的元素的区域，但不遮挡内容

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="footer">哈哈</div>

*{
  margin: 0;
}
.header{
  height: 100px;
  background-color: #483D8B;
}
.content{
  /* height: 500px; */
  background-color: #008000;
}
.footer{
  height: 100px;
  background-color: black;
}
.content div{
  float: left;
  width: 33.33%;
  height: 500px;
}
.content .left{
  background-color: #008B8B;
}
.content .center{
  background-color: #A52A2A;
}
.content .right{
  background-color: #B8860B;
}

4浮动的处理方案

语法：clear:left/right/both;

1.给浮动元素所在的父元素设置固定高度常用，但父元素固定，维护修改不方便

2.给父元素的末尾添加一个空标签，指定clear属性不常用，页面中会多出很多空标签，影响浏览器的解析速度

3.给父元素设置样式overflow，对区域进行剪切处理不常用，剪切后页面中的内容会丢失

4.给父元素添加伪类样式常用方式（推荐）
/* 相当于在父元素的末尾添加了一个空的块元素 */
.clearfix:after{
display: block;
clear: both;
content: ".";
/* 增强代码的健壮性 */
height: 0;
visibility: hidden;
}

2. 定位-position

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行绝对定位

堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

<div></div>
<div></div>
<div></div>

div{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
}
div:nth-of-type(1){
  z-index: 1;
  background-color: #008B8B;
}
div:nth-of-type(2){
  z-index: 2;
  background-color: #483D8B;
}
div:nth-of-type(3){
  background-color: #808080;
}

注意：z-index的使用前提是元素必须要有定位属性

3.CSS3常用技巧

CSS3是在CSS2的基础上，新增了部分样式效果、选择器、动画等，简化了CSS的使用方式、提高了其灵活性

3.1 常见效果

圆角效果

语法：border-radius

控制的是元素的四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆

div{
  width: 200px;
  height: 300px;
  margin: 50px auto;
  border-radius: 50%;
  background-color: #483D8B;
}

圆角+定位案例

div{
  position: relative;
  width: 60px;
  height: 30px;
  font-size: 14px;
  color: grey;
  margin: 50px auto;
}
span{
  position: absolute;
  right: -5px;
  top: -7px;
  display: block;
  width: 16px;
  height: 16px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  background-color: red;
}

<div>
  消息通知
  <span>1</span>
</div>

透明效果

1.背景颜色透明：background-color:rgba(x,x,x,x) 透明度在0~1之间

2.全部透明：opacity 透明度在0~1之间

*{
  margin: 0;
}
div{
  position: relative;
  width: 200px;
  height: 200px;
  color: white;
  margin: 50px auto;
  background-size: cover;
  background-image: url(./timg.jpg);
}
p{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background-color: rgba(0,0,0,0.2);
}

<div>
  <p>五折秒杀秋衣秋裤套装</p>
</div>

阴影效果

盒子阴影：box-shadow

div{
width: 200px;
height: 200px;
margin: 50px auto;
/* 参数一X轴偏移量 参数二Y轴偏移量 参数三阴影模糊程度 
【参数四阴影扩展半径】 参数五阴影颜色 参数六 inset内阴影 */
box-shadow: 3px 3px 9px grey;
}

文本阴影：text-shadow

p{
text-align: center;
text-shadow: 3px 3px 9px grey;
}