float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢
<div style="width:100px;">11111</div><div style="width:150px">2222</div>
  这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left
<div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div>
再预览,就可以看到,它们到一行上了。
  clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both
很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float
举个例子,还是上面的
  我们设置第二个div的clear:left,也就是不让它左边有float
<div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div>
  我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float
  因为css的定义是后面的可以覆盖前面的.

转: CSS中float和clear的理解的更多相关文章

  1. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  2. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  3. CSS的float与clear

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  4. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  5. 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

      之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...

  6. 解决CSS中float:left后需要clear:both清空

    现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...

  7. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  8. css中float left与float right的使用说明

    转自:http://www.jb51.net/css/33740.html   脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...

  9. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

随机推荐

  1. [转载] 深入 superviser

    模块简介 新人接触线上的时候一般都会碰到supervise这个工具,导师对这个模块的解释一般就是,这个模块是监控进程,当进程挂掉之后,supervise会将进程启动.这样当进程出 现问题,如因出cor ...

  2. Codeforces 713C Sonya and Problem Wihtout a Legend

    题意:给一个序列,可以进行若干次操作,每次操作选择一个数让它+1或-1,问最少要几次操作使得序列变为严格单调递增序列. 题解:首先考虑非严格递增序列,则每个数字最终变成的数字一定是该数组中的某个数.那 ...

  3. 疯狂java讲义之流程控制与数组

    while package ch4; /** * Created by Jiqing on 2016/11/6. */ public class While { public static void ...

  4. Object Pascal 数据类型

     数据类型与定义变量 Object Pascal 语言的最大特点是对数据类型的要求非常严谨.传递给过程或函数的参数值必须与形参的类型一致.在Object Pascal 语言中不会看到像C 语言编译器提 ...

  5. jpeg了解

    JPEG是一个压缩标准,又可分为标准 JPEG.渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持最高级 别的压缩,不过,这种压缩是有损耗的 ...

  6. Microsoft VS 2008 过期解决方法

    开始>控制面板>添加或删除程序 里找到VS2008,点“更改/删除”,出现: 然后,打开“显示Visual Studio试用版序列号输入框小程序”的软件(单击链接可以转到下载地址),显示: ...

  7. qq被冻结怎么激活

    原文章http://jingyan.baidu.com/article/ce436649f43d4d3773afd3f2.html 一些QQ用户可能遇到过QQ被冻结的情况吧!不用着急,小编分享QQ被冻 ...

  8. MySQL5.7 JSON实现简介

    版权声明:本文由吴双桥原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/205 来源:腾云阁 https://www.qclo ...

  9. MySQL高可用性分析

    版权声明:本文由易固武原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/203 来源:腾云阁 https://www.qclo ...

  10. java 导入包(误区)

    java的导入包语句的作用仅仅是简化书写,很多时候我们都误以为是将一个类导入到内存中. 如果是这样,那么运行的效率会很慢.