浮动

浮动的概念

  • 什么是浮动，他在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. [转载]Python方法绑定——Unbound/Bound method object的一些梳理

    本篇主要总结Python中绑定方法对象(Bound method object)和未绑定方法对象(Unboud method object)的区别和联系.主要目的是分清楚这两个极容易混淆的概念,顺便将 ...

  2. 尝试brpc来升级rpc服务，测试应用过程

    照着官方文档来,不过在mac下还是有些小坑 对熟悉c++的人来说很小儿科,但对c++相对比较外行 (只知道基本语法和部分数据结构)的人,还是作不到开箱即用 首先编译```If you need to ...

  3. Linux之seq命令

    作用:seq命令用于以指定增量从首数开始打印数字到尾数,即产生从某个数到另外一个数之间的所有整数,并且可以对整数的格式.宽度.分割符号进行控制 语法: [1]  seq [选项]    尾数 [2]  ...

  4. Matlab高级教程_第二篇：Matlab2016a和VS2013混合

    1. 首先把VS2017的XML两个配置文件放到 2. 然后一步一步的进行选择: 3. 2016版本的deploytool工具已经改版了,具体详细使用如下 4. 编写一个测试函数 我们编译成C#语言的 ...

  5. 视觉SLAM算法框架解析(1) PTAM

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本系列文章旨在总结主流视觉SLAM算法的框架,对比各个算法在子模块的差异,最终提炼出融合各个算法优点的架构. PTAM[1]是视觉SLAM领域里程 ...

  6. day31-hmac模块检测客户端是否合法

    #如果客户端知道服务端的ip地址和端口,就可以连接服务端,信息不安全. #使用os.urandam随机生成32位bytes,然后hmac加密之后再发送给客户端. #server: import soc ...

  7. vs编译完提示不支持尝试的执行操作

    最近公司在用MFC做项目,编译完就弹窗提示,不支持尝试的执行操作,开始没注意,但是点击弹窗提示无反应: 问题原因:dialog里的控件有的已经删除了,但是DoDataExchange函数还存在控件的关 ...

  8. 102）PHP，目录操作

    基本的操作: 创建目录: mkdir(目录地址,权限,是否递归创建=false); 注意第二个参数在windows系统下没有作用, 递归创建,就是多级目录,要是设计不存在目录,就自动创建 删除目录 R ...

  9. 吴裕雄--天生自然 HADOOP大数据分布式处理：使用WinSCP连接本机与虚拟机

  10. 使用这些高效Java工具类享受开发乐趣

    使用这些高效Java工具类享受开发乐趣导语在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.在开发中,使用这些工具类,不仅可以提高编码效率,还可以提高 ...