1,首先,我们布局主要的div块:

例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性:

效果图:

2,增加基本浮动

如今我们想让红色div放到绿色div右边,我们在两个div中增加浮动

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果图:

3,加入一个处于标准流的div

效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

加入了一个处于标准流的div中。能够非常明显的看出一种float的效果,红块div和绿块div像云一样漂浮在橘黄色div上面,这个效果非常贴切的符合float这个词。

可是能够明显的看出,浮动会带来一个遮盖的不良效果,然而在真正的网页设计中,我们却并不须要这样的遮盖的效果。

接下来演示怎样清除浮动:

4,首先我们将红块右移动

效果图:

5,如今我想让大块不被覆盖

清除橘黄色块的左浮动:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果:

6,为了能更清楚看清浮动的影响。如今。我们。改变下大小:将红色div的高度加长,并将橘黄色div长度清除

效果:

7,接着我们为黄色div清除右浮动。然后将绿色div加长:

效果:

能够看出黄色div的上边紧贴着红色div的下边,可是由于绿色div加长。又有一个遮盖的效果:

8,为了既能清除左浮动,又能清除右浮动,I'll take both;

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGhjMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

CSS demo:flaot & clear float的更多相关文章

  1. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. 精简高效CSS系列之二——浮动float

    一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...

  5. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  6. css中常见几种float方式以及倒计时(刷新页面不清)

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  7. 转载:Clear Float

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...

  8. CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  9. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

随机推荐

  1. unity 自动删除未引用的Assets下的资源

    随着时间的堆积,项目中Assets文件夹下的资源会变得越来越繁杂,有些贴图.材质啥的可能压根没有使用过,但是又不敢轻易去删除. 这里分享两个插件,用于管理这些资源. 一.ResourceChecker ...

  2. TIME定时器

    一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器,分为基本定时器,通用定时器和高级定时器.基本定时器 TIM6 和 TIM7 是一个 16 位的只能向上计数的定时器,只能定 ...

  3. 【UVA 437】The Tower of Babylon(记忆化搜索写法)

    [题目链接]:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  4. 【codeforces 538E】Demiurges Play Again

    [题目链接]:http://codeforces.com/problemset/problem/538/E [题意] 给你一棵树; 有两个人,分别从根节点开始,往叶子节点的方向走; 每个人每次只能走一 ...

  5. Java基础学习总结(20)——基础语法

    一.标识符 二.关键字 三.JAVA基础数据类型 3.1. java常量 3.2. java变量 从本质上来讲,变量其实是内存里面的一小块区域,一个程序在运行的时候,实际上这个程序是位于内存里面,然后 ...

  6. 【Facebook的UI开发框架React入门之九】button简单介绍(iOS平台)-goodmao

    --------------------------------------------------------------------------------------------------- ...

  7. 7-07. PAT排名汇总(25) (结构体 ZJU_PAT)

    题目链接:http://www.patest.cn/contests/ds/7-07 编程能力測试(Programming Ability Test,简称PAT)是浙江大学计算机科学与技术学院主办的专 ...

  8. JAVA并发-内置锁和ThreadLocal

    上一篇博客讲过,当多个线程访问共享的可变变量的时候,可以使用锁来进行线程同步.那么如果线程安全性存在的3个前提条件不同时存在的话,自然就不需要考虑线程安全性了.或者说如果我们能够将某个共享变量变为局部 ...

  9. Armbian hostname and WiFi configuration

    In previous post i have described installation of Armbian on Orange Pi PC Plus. Now is the time for ...

  10. spring IOC --- 控制反转(依赖注入)----简单的实例

    IoC(Inversion of Control)控制反转,对象创建责任的反转,在spring中BeanFacotory是IoC容器的核心接口,负责实例化,定位,配置应用程序中的对象及建立这些对象间的 ...