float浮动

 
首先老师要声明，浮动这一块，和边距、定位相比，它是比较难的，但是用它，页面排版会更好。
 
这节课就直接上代码，看着代码去学浮动。
我们先弄一个div，给它一个背景颜色：
HTML：
 
<div id="div1">我是浮动div</div>
 
CSS：
 
#div1{

    background-color: aquamarine;

}
 
这里同学们能看到，div1，它占据整行，有一个背景色。那么我们先来看看给它设置一个float(浮动)属性：
CSS：
 
#div1{

    background-color: aquamarine;

    float: left;

}
 
这样我们就让div1成为了浮动，再刷新页面，会发现，div1的宽度不在是占据整行了，而是变成内容有多大，它就有多大。那么，还能设置它的宽度不呢？答案是能，我们用width来设置：
CSS：
 
#div1{

    width: 300px;

}
 
在div1的样式里再加一个宽度，就可以了，它一样能占据更多的宽度，比如设置成"width:100%"，这句话的意思是，宽度为百分之百！就是说，它的父级有多宽，它就会有多宽，这里我们没给div设置什么父亲元素，它是写在body下面的，所以body(整个浏览器)有多宽，它就有多宽。
 
它有什么特点呢？我们再在div1下面加一个div2测试一下，div2我们不给任何样式：
HTML：
<div>我是div2，没有任何样式</div>
然后去刷新页面，会发现，div2它没有跨行，而是在div1后面去了。这就是float最大的特性，它不像“绝对定位”一样脱离文本，float它依旧存在文本里的，不过它默认情况下，宽度是只有内容的宽度，所以会改变块级元素的宽度(占据整行)。跟“相对定位”也有区别，相对定位会保留原本元素存在的位置，而它不会，我们可以使用外边距margin来位移它的位置：
CSS：
 
#div1{

    margin:80px 0 0 100px;

}
 
再次在div1里面加样式，能看到，div1发生了位移，那我们试一下，像“定位”一样，用top或者left会不会有效果呢：
CSS：
 
#div1{

    left:100px;

    top:80px;

}
 
将margin改成以上代码测试一下。同学们会发现，没作用！那么区别出来了，float要让它产生位置变化，需要用到的是边距，不能像定位一样，直接使用left和top。那么我们将代码改回去，改成margin继续。
我们能看到，div1使用了float移动位置过后，随后的div2也跟着它后面像右侧移动，“相对定位”的话，只会保留原本位置，自身移动不会影响其他元素，这里的float对则对其他元素产生了影响。还能看出，他的高宽，也只有我们设置过的大小，左侧和上方跟div1本身是没有直接关系的。我们可以再加一个高来看出更明显的效果：
CSS：
 
#div1{

    height: 200px;

}
 
依旧是在div1里加样式，我们能看到div1的高宽，很明显了吧！左侧和上方空出来的部分，则是它使用外边距移动过后留下的空白，那么它究竟会不会影响其他元素呢，会！
我们给div2加一个ID为'div2'然后再加样式：
HTML：
 
<div id="div2">我是div2，没有任何样式</div>
 
CSS：
 
#div2{

    margin:0 0 0 100px;

}
 
这样的话，div2它原本应该是会距离左侧100px对吧，但是它却不移动，是因为什么呢？那我们再给div2加一个背景色看看它究竟怎么回事：
CSS：
 
#div2{

    background-color: red;

}
 
给div2再加一个背景色，会看到，咦！它是占据整行的，关键是什么，它确实离左侧100px了，但是它基于的是浏览器左侧，而不是div1，是因为div1是浮动，它虽然还在文本里，但是它也跨了一个领域(就这样解释吧....多看看手册里怎么解释的哈，同学们)，它即影响其他元素，也又不影响，为什么呢？同学们能看到，div2的内容是基于div1的，而宽却是基于浏览器的。如果这样做，就会很难控制了，为什么呢，如果我们要div2距离div1有50px的距离，还要先清楚div1的宽和距离浏览器的距离，这样的话，会让人很难做的，很烦！那我们怎么做呢？让div2也成为float咯，先试试效果：
CSS：
 
#div2{

    float: left;

}
 
给div2加一个浮动，然后在页面上刷新能看到，它是基于div1的了，距离它100px了，而且宽度什么的都被float改变了。很多同学不会很会运用它，是因为做的少，多尝试，就能理解，老师就是这样过来的。
有同学问，float这样哪有什么好的？还比边距和定位难。那么我们将float的值left换成right试试，加一个div3：
HTML：
 
<div id="div3">我是第三个div，我是浮动right</div>
 
CSS：
 
#div3{

    float: right;

}
 
能够看到，div3就跑到浏览器的右侧去了，是因为它的值为"right"，跑到右侧去，这样的话，我们拖动浏览器，它就会适应浏览器的宽度，永远基于浏览器的右侧，这样的话，我们设置它发生位移，甚至是之后的“网页自适应”也更好控制了。举个例子：老师的浏览器宽度为1920px，我要让某个div模块在我页面的最右侧，难道我就用left然后这是它位移1920px吗？那如果还要距离右侧一点距离，老师还得一个px一个px或者大概的去估测，那不是很傻吗。而用了right让它基于右侧，就跟左侧一样，我们来这样玩一下：
CSS：
 
#div3{

     margin:0 50px 0 0;

     background-color: bisque;

 }
 
老师总是给背景色，也是为了让各位同学看得更加清楚。上面的代码margin:0 50px 0 0;同学们明白吗？之前的课程里讲过，4个值的顺序是：top、right、bottom、left。那么就是说，距离右侧50px对吧。嗯....老师测试了一下，效果很明显！
 
float一般会用在哪里呢？我们不是经常逛商城吗，淘宝、京东等，我们写一个网页，首先当然是分析了，那么一个首页怎么写？大概是这样的：顶部、左侧导航栏、右侧内容。那么我们就可以给顶部设置一个float设置成宽度100%，左侧float比如宽度是20%，那么右侧内容的宽度则是80%。这样的话， 三个作为父级元素，里面的子孙后代也只好遵循他们的宽度。
老师给大家一个代码，可以模拟一下效果看看：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>静态布局</title>

    <style>

        div{

            border: 1px solid red;

            margin: 2px;

        }

        .maindiv{

            width: 1440px;

            margin: 0 auto;

            overflow: hidden;

        }

        .topcontent{

            height: 80px;

            background-color: lightcyan;

        }

        .bottomcontent{

            height: 120px;

            background-color: lightgoldenrodyellow;

        }

        .middlecontent{

            overflow: hidden;

        }

        .middlecontent .midleft{

            float: left;

            min-height: 500px;

            width: 160px;

            background-color: aqua;

        }

        .middlecontent .midright{

            width: 1260px;

            height: 800px;

            display: inline-block;

            background-color: lightcoral;

        }

    </style>

</head>

<body>

<div class="maindiv">

    <div class="topcontent"></div>

    <div class="middlecontent">

        <div class="midleft"></div>

        <div class="midright"></div>

    </div>

    <div class="bottomcontent"></div>

</div>

</body>

</html>
 
老师从最外层开始解释：
先用一个div设置到最外层，做最高级的父亲，里面的内容都是它的子孙后代，给它设置一个固定宽度1440px，其后代就不会超过它的宽度，方便控制。margin:0 auto 的意思是，它距离页面的边距设置成0，默认情况下是有几个px的，所以我们的内容总不是靠近浏览器，同学可以测试一下效果，auto是居中的意思，控制的是块级元素居中哦。
CSS里给每一个div设置了一个border边框效果，margin的上下左右都有2px，给他们来一点小距离，区分。
然后我们说里面的第一个div 它的class="topcontent"，即是顶部内容。因为div占据整行，它的父亲1440px它也就有那么大，给了一个宽度和背景色，好看效果。
最后一个div class="bottomcontent" 就是底部内容，它的样式和顶部是一样的，就是给个高度和背景色。
看中间的div class="middlecontent"，它里面就设置了一个overflow:hidden，意思是什么呢，比如它的高为100px，而你的内容太多，需要使用到120px，那么超出的20px的内容将不会展现出来，换句话说，就是隐藏掉了，但它依旧存在这个div里面的。它里面包含了左侧和右侧，左侧就比如是导航栏，右侧就是内容：
 
老师CSS里面写的，也是一种选择器的写法，就是找到父元素：middlecontent 给出一个空格，然后找到下一个儿子，midleft，这里面的样式的意思是：左浮动、min-hight是最小高度、宽度、背景色；midright：宽度、高度、display:inline-block意思是行内块元素、背景色
 
如果right里面没有display:inline-block，就会因为left里的浮动所影响。
 
如果老师讲的不够清楚，欢迎各位同学给出意见。
 
注：浮动是真的好难讲。要是面对面演讲，那就好多了。
附加：span类行级元素加了float，会变成div类的块级元素一般，能设置top和bottom等
 

第九篇 float浮动的更多相关文章

  1. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  2. Python之路【第九篇】：Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

    Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy   Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用 ...

  3. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  4. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  5. 解剖SQLSERVER 第九篇 OrcaMDF现在能通过系统DMVs显示元数据（译）

    解剖SQLSERVER 第九篇  OrcaMDF现在能通过系统DMVs显示元数据(译) http://improve.dk/orcamdf-now-exposes-metadata-through-s ...

  6. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  7. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  8. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  9. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

随机推荐

  1. yum源问题

    配置本地yum源 1.使用工具将iso文件上传到操作系统,或者直接挂载iso文件 2.配置yum #cd /etc/yum.repos.d/ 删除多余的repo文件 # vi /etc/yum.rep ...

  2. 大牛们是如何开发 WordPress 主题的?

    自己算是写过一个主题,目前也在用( 这里 -> http://udonmai.com/ ),所以多少想说两句. 当初走上web开发的路之后最想干的事情就是写个自己的WP主题...所以网上搜罗了很 ...

  3. meta的相关属性

    <!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta cha ...

  4. 2019-8-12未命名文件 sdfsf

    2019-8-12未命名文件 sdfsf 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章的内容.sdfsdfsdf

  5. react判断点击位置是否为组件内,实现点击外部触发组件内事件

    1.导入 import {findDOMNode} from 'react-dom' 2.绑定ref <div ref="refTest" </div> 3.绑定 ...

  6. java回调函数详解

    声明:博客参考于https://www.cnblogs.com/yangmin86/p/7090882.html,谢谢哥们 回调函数:是指在A类执行代码时,调用了B类中的方法,但B类中的方法执行了A类 ...

  7. 【ABAP系列】SAP ABAP如何在调试查看EXPORT/IMPORT 内存数据

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP如何在调试查看E ...

  8. Python学习之认知（二）

    第二章(二) 2.1.5 变量 ​ 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 变量的命名规则: ​ 1.变量由字母, 数字,下划线搭配组合⽽成 ​ 2.不可以⽤数字开头,更不能是全数字 ​ ...

  9. javascript预编译练习（变态篇）

    例1. <!DOCTYPE html> <html> <head> <title></title> </head> <bo ...

  10. 树莓派4B 串口通信

    提前下载安装Glade图形编辑器 参考 树莓派4B安装netcore 环境部署.发布.执行操作 准备串口设备本文使用串口控制继电器设备 如图 1.发现串口 void GetSerialPort() { ...