开场白

随着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. 父组件传值给子组件时 ,watch props 监听不到解决方案

    watch:{ data:{ immediate:true, handler:function(){ } } }

  2. Defi开发简介

    Defi开发简介 介绍 Defi是去中心化金融的缩写, 是一项旨在利用区块链技术和智能合约创建更加开放,可访问和透明的金融体系的运动. 这与传统金融形成鲜明对比,传统金融通常由少数大型银行和金融机构控 ...

  3. python之PySimpleGUI(一）元素

    1themesg.theme_previewer()获取所有主题颜色sg.preview_all_look_and_feel_themes()同上theme_name_list = sg.theme_ ...

  4. [Java SE/JDK]Intellij IDEA中设置JDK版本

    1 Intellij IDEA 修改JDK版本 第1步:配置JDK环境变量 装好JDK之后,要添加一个环境变量:JAVA_HOME 第2步:修改Idea配置 由Maven决定的版本 <build ...

  5. [Java/IDE]IDEA运行Java类时报错：Error running 'MainTest': Command line is too long. Shorten command line for MainTest or also for Application default configuration

    报错原因 Java项目启动命令过长 解决方法 点击项目启动配置项 -> shorten command line 选项选择 classpath file 或 java manifest 选项 - ...

  6. 如何实现 Java SpringBoot 自动验证入参数据的有效性

    Java SpringBoot 通过javax.validation.constraints下的注解,实现入参数据自动验证 如果碰到 @NotEmpty 否则不生效,注意看下 @RequestBody ...

  7. HashMap实现原理和自动扩容

    HashMap实现原理: JDK1.7:数组+单向链表(头插) 在并发情况下头插可能出现循环链表(死循环)问题.原因:因为头插,在新数组中链表的元素顺序发生了变化, 如上图,假设线程1在扩容,刚刚调整 ...

  8. Git代码提交规范

    1. 引言 思想,因人而异,难以重复 写代码时,每个人的习惯是不一样的,所以,引入了代码规范,为了省力,引入了自动格式化代码工具,前端工程中比较典型的自动格式化代码工具如:Prettier · Opi ...

  9. 关于为element Tree组件实现仿文件夹效果及右键菜单

    <template> <div class="custom-tree-container" @contextmenu.native="handlePas ...

  10. [人脸活体检测] 论文：Learn Convolutional Neural Network for Face Anti-Spoofing

    [人脸活体检测] 论文:Learn Convolutional Neural Network for Face Anti-Spoofing 论文简介 这是最早期CNN用于活体检测的文章,在此之前都是手 ...