时隔多年,从新认识浮动float

简介: 时隔多年,从新认识浮动float

开场白

随着css的发展,在加上各种优秀ui库的兴起。
我们在项目中浮动用的很少。
但并不意味着我们不使用浮动了。
曾几何时,浮动这个属性是那个遥远时代的'超级明星'
排版,布局,都需要使用他。
今不如昔:现在没落了。他的这几个属性还记得吗?
1.包裹性
2.浮动的自适应性
3.float会改变display的值,不是block就是table
4.浮动导致的父元素高度坍塌
5.没有任何margin合并
6.会破坏文档流

浮动有包裹性

包裹性就是说:假设父级元素500px;
浮动的子集元素是200px;
则表现的是200px。这就是包裹性。
我理解的包裹性指的是:浮动元素的宽度会收缩到与内容一致。高度由内容决定。
浮动会使盒子产生包裹性
/* 父级元素500px */
.father-box {
  width: 500px;
  background: pink;
}
/* 浮动的子集元素 */
.float-son {
  float: left;
}
.float img {
  width: 200px;
}
<body>
    <div class="father-box">
        <div class="float-son">
            <img src="./xueyue.png">
        </div>
    </div>
</body>

浮动的自适应性

浮动的自适应性:如果子元素不仅有图片。
还有文字,则原来图片是多大就是多大。
<div class="father-box">
  <div class="float-son">
    <img src="./xueyue.png"> 我就喜欢看雪月剑仙李寒衣
  </div>
</div>

float会改变display的值

元素一旦float的属性值不是none,
则 display 的值不是block就是table。
很多小伙伴看见上面这一句话,
就以为我是胡说八道。
我们可以通过下面的例子来看下
.father-box {
  width: 500px;
  background: pink;
}
.float-son {
  float: left;
}
.float img {
    width: 200px;
    height: 200px;
}
<body>
  <div class="father-box">
    <div class="float-son">
    </div>
  </div>
  <script>
    let dom = document.querySelector(".float-son")
    console.log('是bolck吗?', window.getComputedStyle(dom).display)
  </script>
</body>

看见上面这个例子是不是有点不可思议。
元素设置为浮动后,这个元素的 display 竟然是 block。
有些小伙伴会说:你傻呀?div本来就是块级元素,所以display就是block。
是吗?那我们来看下面的例子。
.father-box {
  width: 500px;
  background: pink;
}
.float-son {
  float: left;
}
.float img {
    width: 200px;
    height: 200px;
}
<body>
  <div class="father-box">
    <sapn class="float-son">
      我是span标签,设置了float
    </sapn>
  </div>
  <script>
    let dom = document.querySelector(".float-son")
    console.log('是bolck吗?', window.getComputedStyle(dom).display)
  </script>
</body>

看了这个例子是不是觉得发现了新知识。
一个本来是行级元素。怎么它的display是block。
是的,你没有看错。
元素一旦float的属性值不是none,则 display 的值不是block就是table。

推论

<sapn class="float-son">
    我是span标签,设置了float
</sapn>
.float-son {
  float: left;
  /**这个block没有意义,不用写 */
  display: block; 
}

什么情况下浮动的值是 table ?

当浮动后; display: inline-table时,
display的属性值才是table;
其他属性值,全是block。
我们可以通过下面的代码来验证一下。
<style>
  /* 父级元素500px */
  .father-box {
    width: 500px;
    background: pink;
  }
  .float-son {
    float: left;
    /* display的值设置为 inline-table*/
    display: inline-table
  }
  .float img {
    width: 200px;
    height: 200px;
  }
</style>
<body>
  <div class="father-box">
    <sapn class="float-son">
        我是span标签,设置了float
    </sapn>
  </div>
  <script>
      let dom = document.querySelector(".float-son")
      console.log('是table吗?', window.getComputedStyle(dom).display)
  </script>
</body>

浮动导致的父元素高度坍塌

我们都知道,浮动属性由一个非常著名的表现特征。
就是会让父元素的高度坍塌。
浮动导致的父元素高度坍塌我的理解就是:
子元素设置浮动后脱离文档流,
从而导致子元素无法撑父元素的高度,
就会造成父元素的高度塌陷。

下面这样的情况就会导致父元素高度坍塌

<style>
/* 父级元素500px */
.father-box {
  width: 500px;
  background: pink;
}
.float-son {
  height: 300px;
  float: left;
}
</style>
<body>
<div class="father-box">
  我是父级元素
  <div class="float-son">
    下面这样的情况就会导致父元素高度坍塌
  </div>
</div>
</body>

我理解的 clear

我们都知道 clear 有4个属性值,分别是:
clear:none | left | right | both
之前看见有一篇文章有一个大佬是这样说的:
凡是可以使用 clear:left 或者 clear:right起作用的,
就一定可以可以使用 clear:both去替换。
我觉得不一定。我们来看下面的例子
.left {
  background: rgba(44, 230, 7, 0.904);
  height: 300px;
  float: left;
}
.center1 {
  background: rgb(10, 197, 239);
  height: 300px;
  float: left;
}
.center2 {
  background: rgb(224, 9, 167);
  height: 300px;
  /* 这里我使用了右侧清除浮动 */
  clear: right;
}
.right {
  background: pink;
  height: 300px;
  float: left;
}
<body>
  <div class="father-box">
    <div class="left">我是左侧的内容</div>
    <div class="center1">center1center1center1</div>
    <div class="center2">center2center2center2</div>
    <div class="right">我是右侧的内容</div>
  </div>
</body>

其他的不变,按照大佬的说法:

可以使用 clear: right;就可以使用 clear:both去替换。

我就修改一下,如下:

.center2 {
  background: rgb(224, 9, 167);
  height: 300px;
  /* 这里我使用了右侧清除浮动 */
  clear: both;
}

尾声

如果你觉得,这篇文章写的不错,对你有用。
请给我点一个赞,感谢了。

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
5月前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
60 5
|
2月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
64 3
|
2月前
元素的浮动属性float
元素的浮动属性float。
14 6
|
3月前
元素的浮动属性float
【8月更文挑战第25天】元素的浮动属性float。
39 2
|
6月前
|
前端开发
CSS float(浮动)
CSS float(浮动)
58 2
|
12月前
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用
|
前端开发
css--float浮动
css--float浮动
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
130 0
|
前端开发 容器
简单理解float浮动
简单理解float浮动
72 0
|
6月前
|
存储 Java
百度搜索:蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储,float和double类型可以表示非常大或非常小的浮点数,并且具有一定的精度。然而,由于浮点数的特性,它们在进行精确计算时可能会存在舍入误差。在编写Java程序时,需要注意使
95 0