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

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. NET基础课--开发工具实用功能

    1.浏览代码结构 类视图 2.重构功能 提取长的的方法体中的部分方法到单独函数中 路径:选择代码段,右击重构----提取方法 3.代码结构 a 代码对齐 点[编辑]-[高级]-[设置选定内容的格式] ...

  2. 解决Xcode6.4安装插件后插件不能使用的问题

    下面是上网查的方法,综合了一下,亲测 原因: 苹果要求加入UUID证书从而保证插件的稳定性. 解决方法: 一.查看Xcode的UUID 在终端执行 defaults read /Application ...

  3. AE分级渲染

    分级渲染classbreakrenderer位于carto类库中,进行分级渲染时,首先要将相应图层按照某一Field分级.可使用esrisystem类库中的iclassifyGEN类的classify ...

  4. jquery模仿css3延迟效果

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  5. IBM SPSS Modeler 预测建模基础（一）

    1.搜索下载IBM SPSS Modeler 14.1 32位 及 IBM SPSS Modeler 14.1 注册文件(破解布丁): 2.下载train.csv 及 test.csv: train. ...

  6. 数据结构——左高树

    一.扩充二叉树 考察一棵二叉树,它有一类特殊的节点叫做外部节点( external node),用来代替树中的空子树,其余节点叫做内部节点( internal node).增加了外部节点的二叉树被称为 ...

  7. 如何利用自己的电脑做服务器发布tomcat的WEB项目供外网访问

    1.首先你要确定你有一个外网ip地址.如果你分配到的是一个局域网IP地址需要经过一系列的转换为外网ip地址,然后继续下面操作. 2.拿到外网IP地址,进行tomcat的server.xml文件的配置. ...

  8. OpenCV——Sobel和拉普拉斯变换

    Sobel变换和拉普拉斯变换都是高通滤波器. 什么是高通滤波器呢?就是保留图像的高频分量(变化剧烈的部分),抑制图像的低频分量(变化缓慢的部分).而图像变化剧烈的部分,往往反应的就是图像的边沿信息了. ...

  9. 50中制作图表的JS库

    参看以下链接:http://www.tuicool.com/articles/FZNjMz

  10. 如何成为一个真正在路上的Linuxer

    Linux 是工具,却更像一个信仰. 写在前面: 本文目的不是教你如何成为一个真正的Linuxer,也没有能力教你成为一个真正的linuxer,而是通过笔者的一些想法试图指引你真正踏上学习linux之 ...