首先给浮动一个定义:浮动就是程序中定位的一种
那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿
浮动定位：解决了多个块级元素能在一行内显示。
什么是浮动定位。可以用如下几个特点定义。
特点一：将元素排除在文档流之外，即元素脱离文档流，不受默认排列方式（从上到下或者从左往右）的控制
特点二：浮动起来的元素将不再占用页面的空间。（元素从浏览器上原地拔起，从上往下依旧能看到浮动元素），有可能会压住其他的元素。
特点三：元素会停靠在包含框（父层元素）的左边或左边，或者停靠在已经浮动的元素的左边或者右边
特点四：元素无论怎么浮动，最终还是在包含框之内。
特点五：块级浮动之后，宽度自适应不是100%
特点六：行内元素浮动后，除了具备以上特点，它将变成块级元素，行内元素设置浮动多数是为了改变宽和高。
浮动属性：
float:定义当前元素浮动
取值：
none（默认没浮动）
left（浮动方向左边）
right（浮动方向右边）
下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦！
更多知识关注小编，或者百度网络营销师钟震，钟震讲网络营销。会有很多相关知识，公众号网络营销师钟震，以后每天都会分享web，淘宝运营，竞价，网站建设和优化，社媒方面的知识。与大家共同进步。希望对您有一点点帮助，喜欢记得关注公众号。
2023 年 CSS 自适应正方形必须拿下
都2023年了，CSS自适应正方形必须拿下
前言
在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱~
正方形
这很简单，设置盒子宽高都为200px就可以了
<div class="box">小明写的div>
.box {
width: 200px;
height: 200px;
background: pink;
}
自适应正方形青铜
提起自适应，想必都会想到rem、vw等相对单位，我们分别用这些单位来实现一下。
rem
<div class="rem">remdiv>
body {
font-size: 16px;
}
.rem {
width: 10rem;
height: 10rem;
background: pink;
}
@media only screen and (max-width: 1200px) {
body {
font-size: 12px;
}
}
屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px * 160px；
屏幕宽度小于1200px时，字体为12px，rem的盒子的大小为 120px * 120px；
实际应用场景屏幕宽度变化会动态计算rem的值，这里只用于案例理解。
优点
在适配了rem的项目中，可以直接使用rem设置盒子宽高，即自适应正方形
缺点
在未设置rem的项目中，单独为了实现自适应正方形有点大材小用
vw
<div class="vw">vwdiv>
.vw {
width: 10vw;
height: 10vw;
background: yellow;
}
可以看到正方形跟随着屏幕宽度的变化自适应，这是我们想要的效果
优点
vw为内置视口单位，可直接使用。
缺点
在实际的业务场景中，将设计稿的尺寸转化为vw相对麻烦
黄金
使用 百分比+padding，这里有一个很细的知识点；当padding、margin取值为百分比时，百分比的值是以父元素的width为参考。
<div class="padding">div>
.padding {
width: 20%;
padding-top: 20%;
/* padding-top或padding-bottom都可以 */
background: #696969;
}
我们给盒子的宽度设置20%，使用的padding的纵轴将盒子高度撑开，这样便得到了一个自适应正方形。
细心的小伙伴会发现，现在是个自适应正方形没错了，但是高度被占满了，内容没地方放了。 是的，当前只是一个正方形；在实际业务场景中，内部不是图片就是其他内容，不止需要一个正方形的。
解决办法：再嵌套一层内容盒子，外层方形盒为相对定位，内层内容盒为绝对定位；内层盒宽高基于外层方形盒，代码如下
<div class="box-wrap">
<div class="box-content">我是内容区域div>
div>
.box-wrap {
position: relative;
width: 20%;
padding-top: 20%;
}
.box-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: burlywood;
}
.box-content类为内容盒，我们可以在内容盒里为所欲为还原设计稿了。
若方形区域只需要展示图片，同理如下
<div class="box-wrap">
<img src="./img/A.webp" alt="">
div>
.box-wrap {
position: relative;
width: 20%;
padding-top: 20%;
}
.box-wrap > img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
object-fit: cover;
}
这里我们就实现了一个自适应方形图片了。
优点
无需其他配置，设置灵活，扩展性强。
缺点
需要额外嵌套一层内容盒（个人拙见）
钻石
顾名思义，它很腻害；他就是css属性aspect-ratio
aspect-ratio MDN文档：
aspect-ratio，简言之就是宽高比。多说无益，上代码
<div class="box-square">我是内容div>
.box-square {
aspect-ratio: 1 / 1;
/* aspect-ratio: 1; 可简写 */
width: 20%;
background: chocolate;
}
一个属性，自适应正方形就OK啦；属性再好，也得看兼容性和浏览器支持。
优点
属性通俗易懂，无需其他配置，无需嵌套内容盒。
缺点
唯一缺点就是兼容性了，2023年了该支持的基本都支持上了，此事古难全！
活学活用
至此，知识点应该都掌握了吧；让我们来实现一个真实的业务需求，如图
实现这个布局，假设总宽1000px，商品卡片左右间距12px，布局要求自适应+响应式。
百分比+padding实现
<main>
<div class="shop">
<div class="shop-img"><img src="./img/A.webp" alt="">div>
<div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。div>
div>
<div class="shop">
<div class="shop-img"><img src="./img/A.webp" alt="">div>
<div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。div>
div>
<div class="shop">
<div class="shop-img"><img src="./img/A.webp" alt="">div>
<div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。div>
div>
<div class="shop">
<div class="shop-img"><img src="./img/A.webp" alt="">div>
<div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。div>
div>
main>
main {
max-width: 1000px;
margin: 0 auto;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.shop {
width: calc(25% - 9px);
box-shadow: 0 0 8px #0002;
border-radius: 4px;
overflow: hidden;
.shop-img {
position: relative;
width: 100%;
padding-top: 100%;
> img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
object-fit: cover;
}
}
.shop-title {
padding: 8px;
font-size: 14px;
color: #232323;
}
}
}
@media only screen and (max-width: 768px) {
main {
.shop {
width: calc(50% - 6px);
margin-bottom: 12px;
}
}
}
来看看效果
aspect-ratio实现
使用aspect-ratio了属性，我们可以少嵌套一个外层方形盒
这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。
这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。
这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。
这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。
样式基本不变，改一下图片相关的部分。
main {
max-width: 1000px;
margin: 0 auto;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.shop {
width: calc(25% - 9px);
box-shadow: 0 0 8px #0002;
border-radius: 4px;
overflow: hidden;
> img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.shop-title {
padding: 8px;
font-size: 14px;
color: #232323;
}
}
}
@media only screen and (max-width: 768px) {
main {
.shop {
width: calc(50% - 6px);
margin-bottom: 12px;
}
}
}
来看看效果
至此，css实现正方形的内容已经阐述完毕。通过上面示例，也引发了我的一些思考，愿与诸君共享之。
扩展
在实际业务中，应用到的布局不止正方形，也有长方形、圆形等。
我们再来看个需求——UI规定图片区域宽高比为4:3，给的图片也是4:3。
一般情况我们的方案是：设置好图片宽度，高度自适应就OK了。这样做相对简便，但也会存在一些问题；比如图片宽高比并不是4:3，或多或少，又或者传的图不规整；这样会导致我们的页面布局不可控，所谓失之毫厘谬以千里。
这时候就牵扯到了代码健壮性和可扩展性，作为前端开发个人觉得页面应该有良好的用户体验，而不是调教用户。接下来我分别用百分比+padding、aspect-ratio等方案来实现该业务场景。
借用方形示例，这里我就只贴关键代码
百分比+padding实现
main {
.shop {
.shop-img {
width: 100%;
padding-top: 75%;
}
}
}
aspect-ratio实现
main {
.shop {
> img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
}
}
看下效果
- EOF -
