开场白

随着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;

}

尾声

如果你觉得，这篇文章写的不错，对你有用。

请给我点一个赞，感谢了。

时隔多年，从新认识浮动float的更多相关文章

  1. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  2. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  3. 【html】【6】div浮动float

    我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...

  4. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  6. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  7. （转）经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  8. css浮动--float/clear通俗讲解（转载）

    本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...

  9. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  10. global,$GLOBALS[' '] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

随机推荐

  1. 微软博客上几篇 Semantic-kernel （SK）文章

    自从最近微软开源Semantic-kernel  来帮助开发人员在其应用程序中使用AI大型语言模型(LLM)以来,Microsoft一直在忙于改进它,发布了有关如何使用它的新指南并发布了5篇文章介绍他 ...

  2. CSS3新增选择器（属性选择器、结构伪类选择器、伪元素选择器）

    ​本博文介绍CSS3中新增的选择器,包括属性选择器.结构伪类选择器和伪元素选择器. 1 属性选择器 属性选择器([属性])可以根据元素的属性和属性值来对符合要求的元素进行选择. 属性选择器的基础语法如 ...

  3. Kubernetes 各个组件 启动参数介绍

    kube-controller-manager Kubernetes 控制器管理器是一个守护进程,内嵌随 Kubernetes 一起发布的核心控制回路.在机器人和自动化的应用中,控制回路是一个永不休止 ...

  4. day39:MySQL:查询操作之单表查询&多表查询&子查询

    目录 part1:单表查询 1.where条件的使用 2.group 子句 分组分类 3.having 数据在分类分组之后,进行二次数据过滤 4.order by 排序, 按照什么字段进行排序 5.l ...

  5. Docker容器核心实践(操作容器)

    镜像和容器是docker中最基础的概念,镜像可以理解为包含应用程序以及其相关依赖的一个基础文件系统,在其启动过程中,以只读的方式被用于创建容器的运行环境,本质上是基于UnionFS文件系统的一组镜像层 ...

  6. C# 从0到实战 lambda表达式和Expression-bodied表达式

    什么是lambda表达式(λ表达式) 用过其他函数式语言的人可能对闭包和惰性计算很熟悉,没有用过的人也多多少少的听说过Lambda表达式.那么到底什么是lambda表达式呢?按我的看法是创建一个匿名的 ...

  7. flutter系列之:如何自定义动画路由

    目录 简介 自定义跳转使用 flutter动画基础 实现一个自定义的route 总结 简介 flutter中有默认的Route组件,叫做MaterialPageRoute,一般情况下我们在flutte ...

  8. 今天能恢复我的Django吗——恢复了！

    今天能用两小时恢复我的Django吗 实在是累了,昨天和队友改bug的时候为了能在我的电脑上实现他的程序就在datagrip中删了我django建的表.没想到啊,这一删就全是报错!! 不说了,今天看看 ...

  9. 基于Canal实现MySQL 8.0 数据库数据同步

    前言 服务器说明 主机名称 操作系统 说明 192.168.11.82 Ubuntu 22.04 主库所在服务器 192.168.11.28 Oracle Linux Server 8.7 从库所在服 ...

  10. 快速上手Linux核心命令（十）：Linux安装软件

    目录 前言 rpm rpm包管理器 yum 自动化RPM包管理工具 前言 这期呢主要说一说Linux中包软件管理相关命令,这一期的命令虽然只有两个.但 软件包的安装和卸载都是我们平常最常用的,需要熟练 ...