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

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. 推荐几个常用的jquery ui 框架

    jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...

  2. 一个Demo就懂的Angular之directive

    <body> <div ng-controller="myCtrl"> <hello-word></hello-word> < ...

  3. 提示框的优化之自定义Toast组件之（一）Toast组件的布局实现

    开发步骤:  在res下layout下创建一个Toast的布局资源文件toast_customer.xml  在最外层布局组件中为该布局添加android:id属性  //toast_custo ...

  4. 0118——UIButtton

    1.Button的定义 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; Button有六种类型 enum { UI ...

  5. （转）创建和查看Javadoc文档

    原地址:http://jinnaxu-tju-edu-cn.iteye.com/blog/667177 Javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代 ...

  6. GO语言基础

    Go语言开发 一.Linux下搭建Go开发环境 首先下载Go语言的开发安装包,不管是在官方网站或者国内的Golang镜像都是可以的,注意区分64位和32位的安装包. 下载完安装包之后tar zxvf进 ...

  7. kinect

    1.学习资料 http://blog.csdn.net/dustpg/article/details/37982311 https://github.com/mdkus/kinect-mssdk-op ...

  8. css:hover选择器

    :hover 选择器用于选择鼠标指针浮动上面的元素. :hover选择器可以用于所有的元素,不单是链接. 提示::link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被 ...

  9. jQuery.extend函数详细用法！

    最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...

  10. struts2的注解配置全面解析

    以前在用struts2的注解配置时总是要在web.xml中配置一个初始化参数(actionPackages),最近发现不灵了,仔细研究了下发现即使不用在web.xml中配置也能成功,但时灵时不灵的,很 ...