CSS demo:flaot & clear float
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的更多相关文章
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- 精简高效CSS系列之二——浮动float
一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...
- CSS(6)---通俗讲解浮动(float)
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...
- css中常见几种float方式以及倒计时(刷新页面不清)
css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...
- 转载:Clear Float
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...
- CSS魔法堂:说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
随机推荐
- unity 自动删除未引用的Assets下的资源
随着时间的堆积,项目中Assets文件夹下的资源会变得越来越繁杂,有些贴图.材质啥的可能压根没有使用过,但是又不敢轻易去删除. 这里分享两个插件,用于管理这些资源. 一.ResourceChecker ...
- TIME定时器
一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器,分为基本定时器,通用定时器和高级定时器.基本定时器 TIM6 和 TIM7 是一个 16 位的只能向上计数的定时器,只能定 ...
- 【UVA 437】The Tower of Babylon(记忆化搜索写法)
[题目链接]:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- 【codeforces 538E】Demiurges Play Again
[题目链接]:http://codeforces.com/problemset/problem/538/E [题意] 给你一棵树; 有两个人,分别从根节点开始,往叶子节点的方向走; 每个人每次只能走一 ...
- Java基础学习总结(20)——基础语法
一.标识符 二.关键字 三.JAVA基础数据类型 3.1. java常量 3.2. java变量 从本质上来讲,变量其实是内存里面的一小块区域,一个程序在运行的时候,实际上这个程序是位于内存里面,然后 ...
- 【Facebook的UI开发框架React入门之九】button简单介绍(iOS平台)-goodmao
--------------------------------------------------------------------------------------------------- ...
- 7-07. PAT排名汇总(25) (结构体 ZJU_PAT)
题目链接:http://www.patest.cn/contests/ds/7-07 编程能力測试(Programming Ability Test,简称PAT)是浙江大学计算机科学与技术学院主办的专 ...
- JAVA并发-内置锁和ThreadLocal
上一篇博客讲过,当多个线程访问共享的可变变量的时候,可以使用锁来进行线程同步.那么如果线程安全性存在的3个前提条件不同时存在的话,自然就不需要考虑线程安全性了.或者说如果我们能够将某个共享变量变为局部 ...
- Armbian hostname and WiFi configuration
In previous post i have described installation of Armbian on Orange Pi PC Plus. Now is the time for ...
- spring IOC --- 控制反转(依赖注入)----简单的实例
IoC(Inversion of Control)控制反转,对象创建责任的反转,在spring中BeanFacotory是IoC容器的核心接口,负责实例化,定位,配置应用程序中的对象及建立这些对象间的 ...