浮动

浮动的概念

  • 什么是浮动，他在css中占据什么样的位置

    • 网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

      • 在css中有三种方式来定位位置

        1. 普通文档标准流方式 （默认方式）
        2. 浮动流方式 （飘浮）
        3. 定位方式

    • 在这之中我们讲到的是div浮动方式，元素的浮动顾名思义就是可以飘浮起来的东西，设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定的位置。
  • 为什么有浮动？他有什么作用，他的优势和劣势是什么？
    • 为什么有浮动

      • 浮动在网页中一开始的作用不大，用来实现文字在图片四周达到文字环绕的效果，既然是有用处的自然他就出现了，之后 慢慢的发现浮动很有意思，可以使块元素一行显示，就把更多的功能作用在了页面布局上了

    • 优势
      • 使得布局的方式 更加多样化适用于自定义布局
    • 劣势
      • 因为浮动的原因，该元素盒子是飘浮在其他标准流盒子之上的

CSS浮动属性float详解

  • 浮动的几个属性值有那些？他的作用是什么

    * 选择器：{声明（属性（float）：属性值）;}
属性值 作用
left 元素盒子左浮动
right 元素盒子右浮动
none 元素盒子没有使用浮动（默认值）

CSS浮动布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>三个盒子使用浮动来实现并排效果</title>

    <style>

        div{

            float: left;

            width: 200px;

            height: 200px;

            text-align: center;

        }

        div::after{

            content: "";

            line-height: 200px;

        }

        .box1{

            background-color: aqua;

        }

        .box2{

            background-color: red;

        }

        .box3{

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div class="box1"> box 1</div>

    <div class="box2"> box 2</div>

    <div class="box3"> box 3</div>

</body>

</html>

CSS浮动清除

  • 清除浮动的属性：clear；
属性值 作用
left 元素盒子清除左浮动（需要给清除浮动的第一个最左边的盒子添加clear：left清除左浮动）
right 元素盒子清除左浮动（需要给清除浮动的第一个最右边的盒子添加clear：right）
both 所有元素盒子清除（需要作用在要清除的浮动元素最下面）

如果有用浮动，就应该尽量清除浮动

就好比人生苦短，有始有终

世间的繁华，只能一生去观望

美好的愿望，只能一世去实现

一世一轮回

  • 为什么要清除浮动？

    • 前面也有说过，因为原本浮动是用来做字体图片排版的，之后用来做div布局，必定会有一些不兼容的问题需要解决，虽然是一个缺点，但是不能说浮动元素不好用吧

清除浮动的几种方法

  1. 给浮动的最后一个标签再额外加上一个标签给上clear：both属性

    • 优点： 通俗易懂，书写方便
    • 缺点： 添加许多无意义的标签，结构化较差。
  2. 第一种方式的升级版：通过给高度塌陷的元素添加 :after 伪类元素 相当于在所右子元素浮动元素的最后面添加了一个标签,加上clear：both；优点也体现出来了
    • 优点： 符合闭合浮动思想 结构语义化正确
    • 缺点： 由于IE低版本浏览器ie7以下不支持:after伪类元素，但是可以通过添加zoom：1来做ie的兼容
  3. 给父级元素添加overflow属性方法
    • 可以通过触发BFC的方式来实现清除浮动效果。
    • 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
    • 注意：none不可以，他不会触发BFC
      • 优点： 代码简洁
      • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素和如果使用auto和scroll会出现滚动条，一般情况下是不需要滚动条的。

通用 万能清浮法

该方法是最兼容的方法了，几乎解决了所有会出现版本问题的方式

	.clearAll{

	zoom:1;  /*因为伪类元素在ie7及以下不兼容的兼容方法*/

	}

	.clearAll:after{

		center:"";

		display:block; /* 设置块元素，这样他不会和元素并排，而是最后一个浮动元素的下面*/

		clear:both; /* 清除浮动  上面的三个都要有，缺一不可，下面是解决兼容问题*/

		overflow:hidden; /*再加上一层保障，就万无一失了*/

		visibility:hidden; /*把这个伪元素彻底隐藏，但是他还是存在*/

		height:0;  /*给这个伪元素加上高度，这样他就算在center里面写内容也不显示*/

	}

高度塌陷的产生条件

  • 产生条件

    • 父级元素因为子级浮动引起内部高度为0 产生的高度塌陷
  • 解决方法
    1. 给父元素加固定高度，使父元素自己撑开
    2. 给父元素触发BFC来实现父元素被子元素撑开效果

基础又重要的浮动（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. （转）经验分享：CSS浮动(float,clear)通俗讲解

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

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

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

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

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

  9. 【转】CSS浮动(float,clear)通俗讲解

    作者:杨元 本文链接:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑, ...

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

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

随机推荐

  1. 第一章：ESXi6.7虚拟化环境安装

    1.1 硬件环境及镜像引导准备 1.1.1       硬件和系统资源 要安装ESXi6.7,硬件和系统资源必须满足下列要求: ESXi 6.7 要求主机至少具有两个 CPU 内核,生产环境中需要根据 ...

  2. 用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0，n-1]中任一个重复的数据。

    用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据. 比如:[1, 2, 3, 3, 2, 2, 6, 7, 8, 9] 中 2 or 3 分析:这道题目,实现比 ...

  3. 发生 Configuration system failed to initialize 错误的一个特例

    一般情况下,.net 程序启动时发生 Configuration system failed to initialize 错误, 大都与 config 文件中 <configSections&g ...

  4. Java操作redis客户端Jedis连接集群(Cluster)

    创建JedisCluster类连接redis集群. @Test public void testJedisCluster() throws Exception { //创建一连接,JedisClust ...

  5. java加载property文件配置

    1 properties简介: properties是一种文本文件,内容格式为:     key = value     #单行注释 适合作为简单配置文件使用,通常作为参数配置.国际化资源文件使用. ...

  6. PyTorch基础——使用神经网络识别文字中的情感信息

    一.介绍 知识点 使用 Python 从网络上爬取信息的基本方法 处理语料"洗数据"的基本方法 词袋模型搭建方法 简单 RNN 的搭建方法 简单 LSTM 的搭建方法 二.从网络中 ...

  7. D. Almost All Divisors

    We guessed some integer number xx. You are given a list of almost all its divisors. Almost all means ...

  8. 401认证钓鱼demo

    <?php //@b4dboy if(!isset($_SERVER['PHP_AUTH_USER']) && !isset($_SERVER['PHP_AUTH_PW'])) ...

  9. linux中find，locate，whereis，which关系和用法

    主要有find,locate,whereis,which等 1. find是最常用也是最强大的查找命令,它可以查找任何类型的文件. find命令的一般格式为:find <指定目录>< ...

  10. K3CLOUD表关联

    销售订单关联发货通知单 销售订单表 T_SAL_ORDER A T_SAL_ORDERENTRY B T_SAL_ORDERENTRY_LK C 发货通知单表 T_SAL_DELIVERYNOTICE ...