昨天在解决了盒模型的问题之后又出现了新的知识模糊点：浮动和绝对定位？今天先解决浮动相关的问题，首先列举出想要解决的问题：

1.浮动到底是怎么样的？

2.浮动对元素的影响有什么？

3.浮动主要用来干什么？

第一个问题：浮动到底是怎么样的？

W3CSCHOOL对浮动属性的解释：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。

我个人的理解是：HTML
文件就像是一个方形的水槽，它在浏览器中加载的过程就好比是向水槽中放水，而这些水就代表的是页面中的各个元素，他们都是有顺序的进入水槽（文档流的顺序
和我们写字一样，从上到下从左到右）。当出现了一个具有浮动属性（float）的元素时，就好像是水流中多了一块泡沫，它会浮在水面上（也就是说明元素脱
离了文档流）。在水流停止后（页面加载完毕），这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘（浮动元素会处于包含框的边缘或者另一个浮动元素的边
缘）。

对于浮动元素是否脱离了文档流，这个我刚开始也很迷糊，因为在看教学视频的时候一个老师说没有，另一个老师说有。于是就自己敲了代码做了点实验：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    #div1{

        height: 100px;

        background-color: #e13b00;

        float: left;

        clear: both;

    }

</style>

<body>

    <div id="div1">

        div1div1d

    </div>

    <p>1234567890

    </p>

    <p>1234567890

    </p>

</body>

</html>

上面代码的效果如下：


红色背景的Div是设置了左浮动的元素，根据浮动的定义它应该是脱离文档流的，具体表现如下图：

当我们审查第二个p标签时发现这个标签其实是覆盖了DIV块的，还是独自占据一行，并不是从DIV块的边缘开始的。这就说明：

设置的浮动的元素其实是脱离的文档流的，但是这个元素的内容还是会在视觉上占据空间，不会覆盖其他元素或者被其他元素覆盖。

2.浮动的元素对其他元素的影响有什么？

浮动元素对其他元素的影响就如同上面的例子显示的，浮动的元素会根据自己内容的大小把他之后的元素的内容挤到后面（特别注意，这里说的是内容！是内容！是内容！）。

这里特别说明一下：有些视频教学里说浮动的影响只会作用在紧邻在它后面的元素，这个说法还是有问题的，我上面举得那个例子就说明了红色的DIV块浮动影响的是它后面的两个p元素，而浮动的元素到底会影响多大范围是根据浮动的元素它的内容的大小决定的。

清除浮动带来的影响主要是通过两种方式：

第一种：给不想受到影响的元素增加属性clear：both/right/left. 这个属性的意思并不是清除什么，而是应该理解为拥有这个属性的元素左边或者右边不允许存在浮动元素的内容。

例如我们给第一个p标签增加了clear:left;这样一个属性，那么它就会从DIV块下面开始出现，同时会把第二个p标签也带下来（因为他们是按照顺序显示的）。而我们给第二个p标签增加clear:left，第一个p标签还是受到浮动的影响的。

第二种：给不想受到影响的元素增加属性width：100%；overflow:hidden;   这个方法也是有效的。

3.浮动主要用来干什么？

其实浮动的作用还是很重要的，我们可以利用它实现很常见的两列或者多列的网页布局，下面举个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    *{margin: 0px;padding: 0px}

    #div{

        width: 70%;

        margin: auto;

    }

    #header{

        height: 200px;

        background-color: darkslategrey;

    }

    #main{

        height: 300px;

        padding: 2%;

        background-color: #bfbfbf;

    }

    #left{

        float: left;

        width: 30%;

        height: 300px;

        background-color: #0044aa;

    }

    #right{

        float: right;

        width: 65%;

        height: 300px;

        background-color: yellow;

    }

    #footer{

        height: 200px;

        background-color: rosybrown;

    }

</style>

<body>

    <div id="div">

        <div id="header">

        </div>

        <div id="main">

            <div id="left"></div>

            <div id="right"></div>

        </div>

        <div id="footer">

        </div>

    </div>

</body>

</html>

效果如下：

这就是我们经常看到的一种网页布局，当然我这个例子有点简陋，其实也可以把中间的部分换成三列或是更复杂的形式。

对浮动的学习就到这里了，今天有一种感受就是：学习知识的过程中还是要多敲代码多实验，不能只看书中怎么做或者视频里面老师怎么做，他们思想也并不是就是完全正确。对于疑惑的问题不能马虎带过。当然不仅仅只是学习，在任何时候都该保持有自己的想法。

明天解决绝对定位的问题。

2016年01月09日

不积跬步，无以至千里

PS：我查阅的大部分资料都是来自于网络，如有侵权，请联系我删除

CSS学习笔记——CSS中定位的浮动float的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  3. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. CSS 学习笔记——CSS Selector

    CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...

  5. CSS学习笔记10 相对定位，绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  6. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

随机推荐

  1. 微信网页授权获取code链接

    本公众号授权 "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&r ...

  2. 【SQL学习笔记】排名开窗函数，聚合开窗函数（Over by）

    处理一些分组后,该组按照某列排序后 ,取其中某条完整数据的问题. 或 按照其中不同列分组后的聚合 比如 sum,avg之类. MSDN上语法: Ranking Window Functions < ...

  3. RDLC添加链接

    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdan ...

  4. UIStepper UISlider UISwitch UITextField 基本控件

    1.UIStepper 步进控件 必掌握 1.重要属性: .value 初始值 .maximumValue 最大值 .minimumValue 最小值 .stepValue 间隔 2.常用事件: Va ...

  5. C++Primer笔记(1)

    1.初始化 在C++中,初始化与赋值操作是完全不同的两个操作.初始化不是赋值,初始化的含义是创建变量时赋予其一个初始值,而赋值的含义是把对象的当前值擦除,而以一个新值来代替. 初始化的方式有: ; } ...

  6. redis学习研究--基础知识

    以下内容多为摘抄转载: 1. Redis 是什么 Redis是一个开源的使用ANSI C语言编写的基于内存的key/value存储系统,与memcache类似,但它支持的value类型更多,包括:字符 ...

  7. 关于反射中获取Fields，method，Construts简单介绍

    * getFields()与getDeclaredFields()区别:getFields()只能访问类中声明为公有的字段,私有的字段它无法访问,能访问从其它类继承来的公有方法.getDeclared ...

  8. [C++程序设计]有关形参与实参,及返回值说明

    有关形参与实参的说明:(1) 在定义函数时指定的形参,在未出现函数调用 时,它们并不占内存中的存储单元,因此称它们是 形式参数或虚拟参数,表示它们并不是实际存在的数据,只有在发生函数调用时,函数max ...

  9. MongoDB监控一 mongostat

    mongostat命令                                                               mongostat可以提供mongod和mongos ...

  10. du与df为什么有时候会有差异

    以下仅为本人理解,非官方! du命令:统计父目录的目录项,若目录项存在,则进行查找 df命令:统计inode节点,根据inode节点存储的块大小进行统计 差异原因: 当一个文件被进程调用后,复制文件到 ...