开场白

随着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. noopener, noreferrer 及 nofollow 的用法

    <a> 标签通常会配合着使用 noopener, noreferrer 及 nofollow 这些属性, 它们的作用及用法如下. noopener 当给链接加上 target=" ...

  2. 网络计划技术——关键路线法（Python）

    关键路径法是基于进度网络模型的方法,用网络图表示各项活动之间的相互关系,获得在一定工期.成本.资源约束条件下的最优进度安排.关键路径法源于美国杜邦公司对于项目管理控制成本.减少工期的研究.1959年, ...

  3. kubernetes 启用 PHP + Nginx 网页环境

    kubernetes 启用 PHP + Nginx 网页环境 传统安装方式进行安装步骤较多,使用kubernetes可以实现快速启用环境,在测试或者线上都可以做到快速 启用 编写 yaml 文件 [r ...

  4. ChatGPT，我彻彻底底沦陷了！

    当谈到人工智能技术的时候,我们会经常听到GPT这个术语.它代表"Generative Pre-trained Transformer",是一种机器学习模型,采用了神经网络来模拟人类 ...

  5. 让代码变得优雅简洁的神器：Java8 Stream流式编程

    原创/朱季谦 本文主要基于实际项目常用的Stream Api流式处理总结. 因笔者主要从事风控反欺诈相关工作,故而此文使用比较熟悉的三要素之一的[手机号]黑名单作代码案例说明. 我在项目当中,很早就开 ...

  6. 【实践篇】基于CAS的单点登录实践之路

    作者:京东物流 赵勇萍 前言 上个月我负责的系统SSO升级,对接京东ERP系统,这也让我想起了之前我做过一个单点登录的项目.想来单点登录有很多实现方案,不过最主流的还是基于CAS的方案,所以我也就分享 ...

  7. nginx配置phpcms v9伪静态规则 phpcms伪静态 404 Not Found

    location / { if (!-f $request_filename){ rewrite (.*) /index.php; } rewrite ^/caipu-([0-9]+)-([0-9]+ ...

  8. Docker Compose 部署 Jenkins

    Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具 Jenkins应用广泛,大多数互联网公司都采用Jenkins配合GitLab.Docker.K8s作为实现D ...

  9. 从零开始TP6配置ThinkPHP-ApiDoc

    系统:windows11 集成环境:小皮(原phpstudy) composer:2.5 准备工作:安装小皮后,在软件管理中安装composer,2.3安装不上去,只能安装1.8.5,没关系安装后升级 ...

  10. 天梯赛L1-027 出租

    一.问题描述 下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index ...