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. LC 535. Encode and Decode TinyURL

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  2. 多线程分配线程的实现方案：CountDownLatch类

    需求:假如我们本地有4个文件需要解析,每个文件的内容为20万行.为了提高效率我们要创建4个线程进行处理.等4个线程处理完,要在文件日志表中记录处理状态. 一般的的解决方法是使用join,join用于让 ...

  3. DDNS是动态域名解析的意思

    目前大部分家庭使用PPPOE拨号方式上网,每次上网获得的IP都是随机变换的,但是家里的网络监控.智能设备需要通过网络访问,每次使用都需要先知道IP非常麻烦. 有了DDNS动态域名解析,我们只要到花生壳 ...

  4. centos6.5 内核 ：2.6.32 升级内核

    问题:    CentOS 6.5 的内核一般都是2.6,在2.6的内核下,Docker运行会比较卡,所以一般会选择升级到更高版本,本次教程升级版本为4.4.102 一.升级内核 1.查看内核版本 u ...

  5. HBase 数据恢复

    参考链接: https://community.hortonworks.com/content/supportkb/48748/hbase-master-wont-start-with-followi ...

  6. Python浅拷贝与深拷贝（可变对象与不可变对象）

    第一次遇到深拷贝和浅拷贝的问题是用python在一个for循环中对一个list赋值,使用的语句是 a = b 这个b会不断带入循环,每次计算得到,最后发现list乱七八糟的,后来才发现,python中 ...

  7. .NET制作滚动条

    今天,在工作的时候,刚好做到了滚动条,对这点不是很懂,所以,研究了一下,记录在这里,与大家分享. 对于前台页面,我们就只需要设置数据表的样式:style="overflow: auto; 即 ...

  8. 微信小程序遍历wx:for,wx:for-item,wx:key

    微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...

  9. windows使用放大镜快速放大屏幕局部

    Win10系统自带放大镜有时真的是比较难使用的,但是如果你对他的快捷键有所了解之后就会感觉它其实也没有那么难,用户可以在使用完之后直接按快捷键将其关闭,一起看看吧. Win10系统放大镜快速关闭快捷键 ...

  10. （转）SQLServer查询数据库各种历史记录

    一. 数据库启动记录 1. 最近一次启动SQL Server的时间 select sqlserver_start_time from sys.dm_os_sys_info; --也可参考系统进程创建的 ...