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

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. el表达式判断是否相等

    <c:if test="${order.baofang eq 0 }"> 无包间 </c:if> <c:if test="${order.b ...

  2. Linux内核：sk_buff解析

    sk_buff 目录 1 sk_buff介绍 2 sk_buff组成 3 struct sk_buff 结构体 4 sk_buff成员变量 4.1 Layout布局 4.2 General通用 4.3 ...

  3. RMAN-使用catalog恢复目录进行备份与恢复

    RMAN ArchitectureThe RMAN architecture, shown in Figure 7-3, includes a target database, repository, ...

  4. JQuery 1.3.2联动获取部门

    Sql       $(document).ready(function(){ $(".dept").bind("click", function () { v ...

  5. NFinal学习笔记 02—NFinalBuild

    在学习NFinal的过程中发现在线.net编译器Web版—— NFinalBuild 什么是NFinalBuild呢?它就是帮助我们简单又快速的更新我们网站的一种编译器,我们不用再只为了更新.net网 ...

  6. UML学习-时序图

    时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的.顺序图中显示的是参与交互的对象及其对象之间消息交互的顺序.时序图中包括的建模元素主要有:对象(Actor) ...

  7. 0119——UIImageView的一些属性 和 简单动画实现

    1.contentMode view.contentMode = UIViewContentModeScaleAspectFill; 2.是否实现触摸 3.简单实现动画 图片的名字为campFire0 ...

  8. hdu2037 经典贪心入门

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  9. js 日期天数相加减，格式化yyyy-MM-dd

    参数格式: date :2016-03-02 days:-3(2)当为负数的时候日期往前推,为正数,日期往后推 function addDate(date, days) { var d = new D ...

  10. [Netty 1] 初识Netty

    1. 简介 最早接触netty是在阅读Zookeeper源码的时候,后来看到Storm的消息传输层也由ZMQ转为Netty,所以决心好好来研究和学习一下netty这个框架. Netty项目地址:htt ...