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. Windows 设置定时任务

    cmd 运行 control 命令打开控制面板,找到 管理工具 -> 任务计划程序 一.添加定时任务 创建任务 基本信息 触发器,这里设置开机启动 操作,这里执行一个程序.若为脚本,注意起始于路 ...

  2. WPF使用cefsharp 下载地址

    源码下载: https://github.com/cefsharp/CefSharp dll类库包下载nuget: https://www.nuget.org/packages/CefSharp.Wp ...

  3. spring整合mybatis（代理的方式）【我】

    创建项目等同上一篇非代理方式随笔,只说不一样的部分: 项目结构主要是多了下面红框部分: 配置文件: 主要是dao配置文件中多了Mapper代理java类的扫描包路径: applicationConte ...

  4. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_4 请求参数绑定集合类型

    jabaBean里面有集合的情况 把account里面的user对象先注释掉.get和set都注释掉.然后toString方法需要重写 List和Map这两种对象.生成get和set方法 toStri ...

  5. 【JulyEdu-Python基础】第 ６ 课：高级面向对象

    使用@property添加属性和自定义属性 __slots__和property 方法和属性的动态绑定 使用__slots__限定class实例能添加的属性 __slots__仅对当前类实例起作用,对 ...

  6. 激活后出现grab>

    最近由于经常整理自己电脑上的文件,难免都会遇到误删系统文件或者操作失误导致系统不能够正常进入的情况.这时就会出现grub错误的提示,只能输入命令才能进入系统.那么该输入什么命令呢?其实非常简单. gr ...

  7. 统计学习方法 | 第3章 k邻近法

    第3章 k近邻法   1．近邻法是基本且简单的分类与回归方法.近邻法的基本做法是:对给定的训练实例点和输入实例点,首先确定输入实例点的个最近邻训练实例点,然后利用这个训练实例点的类的多数来预测输入实例 ...

  8. 完全理解js中的&&和||

    阅读代码时对一行代码很困惑 step > max_step && (step = min_step); 查阅资料后发现它等价于 if (step > max_step) { ...

  9. luoguP2822-组合数问题（基础DP）

    题目链接:https://www.luogu.org/problemnew/show/P2822 题意:输入T和k,有T组询问.每组询问输入n.m,求C(i,j)能模k的个数(0<=i<= ...

  10. git clone 报错 fatal: protocol '–https' is not supported 解决办法

    版本:git 2.22.0 系统:win7旗舰版 先把https去掉 再把https加上 神奇的事情出现了,这样就可以了. 很多人都说这样解决了,原因不知道. Administrator@BWE8QX ...