开场白

随着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. VUE中的$set与$delete的原理

    我们上文说了,Vue 是通过 Object.defineProperty 和重写数组的原型方法来达到监控数据的目的.但是,在某些情况下,上面两种方案无法做到监控数据的变化,例如: (1):当我们给对象 ...

  2. Service Mesh之Istio基础入门

    技术背景 分布式服务治理 所谓分布式服务治理就是对服务不断增长的复杂度的管控和管理:管控及管理包含网络拓扑变动.网络延时.通信安全.API网关.服务注册和发现.服务熔断容错.服务超时重试.服务部署.数 ...

  3. Java设计模式 —— 适配器模式

    9 适配器模式 9.1 结构型模式 结构型模式(Structural Pattern) 关注如何将现有类或对象组织在一起形成更强大的结构.结构型模式根据描述目标不同可以分为两种: 类结构型模式:关心类 ...

  4. kettle从入门到精通 第十一课 kettle javascript 解析json数组

    1.json步骤虽然可以解析json数组,但是不够灵活.通过javascript步骤来解析json数组比较灵活,且可以按照需要组装数据流转到下个步骤. 1)步骤名称:可以自定义 2)Transform ...

  5. ROS机器人摄像头寻线

    ROS机器人摄像头寻线 连接小车 注意:必须在同一区域网 ssh clbrobort@clbrobort 激活树莓派主板 roslaunch clbrobot bringup.launch 开启摄像头 ...

  6. 15-js语法检查eslint

    const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); modul ...

  7. scrapy框架简介

    一.安装scrapy环境 -mac或linux:pip install scrapy -windows: 1.pip install wheel 2.pip install twinsted 3.pi ...

  8. 如何实现一个sync.Once

    sync.Once 是 golang里用来实现单例的同步原语.Once 常常用来初始化单例资源, 或者并发访问只需初始化一次的共享资源,或者在测试的时候初始化一次测试资源. 单例,就是某个资源或者对象 ...

  9. pyhton内置函数

    内置函数 1.type(变量名)-> class 查看变量的数据类型 2.print(self, *args, sep=' ', end='\n', file=None) sep:指定多个参数以 ...

  10. 如何将c#在线编辑器嵌入自己项目

    如何将c#在线编辑器嵌入自己项目 首先我们需要介绍一下这个在线编辑器,当前的在线编辑器支持c#的代码编译运行,并且无需后台服务,基于WebAssembly实现的在浏览器端去执行我们的c#代码,基于Ro ...