开场白

随着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. jQuery绑定方法

    流程/*** * 1.文件命名 * jquery.banner.1.0.0.js * jquery.banner.js * 2.添加匿名函数 * (function(){})() * 3.给插件前后添 ...

  2. lua快速入门~在js基础上，知道Lua 和 Js 的不同即可

    lua 和 javaScript 差不多的,就是一些语法的细节不同,学过js,再注意一下下面的细节,就能上手了~ 快速入门,可以直接看一下菜鸟教程的lua:https://www.runoob.com ...

  3. Bean的自动装配(Autowired)

    Bean的自动装配(Autowired) 自动装配是Spring满足bean依赖的一种方式 Spring会在上下文中自动寻找,并自动给bean装配属性 在Spring中有三种自动装配的方式 在xml中 ...

  4. LabVIEW Actor Framwork (2)________ 边学边做server&client

    回顾下初始需求: 现在要做一个类似聊天的demo,一个server端,若干个client端:首先是server启动,通过server可以打开若干个client端,然后每个client可以独立给serv ...

  5. [Linux]Xshell连接Centos7能Ping通但无法连接问题[ssh(d)+firewalld/iptables+chkconfig]

    一 方案与思路 0 xshell客户端监测是否能够ping通目标服务器. 前提:知晓目标服务器IP地址 Linux: ifconfig -a Windows: ipconfig -a 1 利用fire ...

  6. oracle删除一张表后，索引，同义词，视图，约束会被删除么

    问题描述:看到有一道题,说删除一张表之后,什么会被关联删除 进行测试,看看一张表什么会被关联删除,进行scoot下的EMP进行测试 一.创建测试需求用例 表结构: SQL> desc emp; ...

  7. visio秘钥

    一.Visio2016专业版永久激活码: Visio 2016 Professional Retail零售版 [Key]:NKVJM-8MTT4-8YDFR-6738M-DPFJH [Key]:W9W ...

  8. 【Vue】前端解决跨域问题

    Vue解决跨域问题 什么是跨域:违背了同源策略,即协议名.主机名.端口号必须一致.浏览器与服务器之间存在跨域问题,而服务器与服务器之间由于通过Http通信是不存在跨域问题的.     如图所示,浏览器 ...

  9. DES算法图解、密码学

  10. 深入理解 Redis 新特性：Stream

    该数据结构需要 Redis 5.0.0 + 版本才可用使用 概述 Redis stream 是 Redis 5 引入的一种新的数据结构,它是一个高性能.高可靠性的消息队列,主要用于异步消息处理和流式数 ...