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. [转载] 一致性问题和Raft一致性算法

    原文: http://daizuozhuo.github.io/consensus-algorithm/ raft 协议确实比 paxos 协议好懂太多了. 一致性问题 一致性算法是用来解决一致性问题 ...

  2. linux之echo命令

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...

  3. java实现数据库连接池

    package com.kyo.connection; import java.sql.Connection; import java.sql.DatabaseMetaData; import jav ...

  4. kvm相关文章

    配置KVM虚拟机的网络 Bridge和Nat方式http://www.it165.net/os/html/201503/12231.html KVM虚拟机网络配置 Bridge方式,NAT方式 htt ...

  5. OpenGL的视图变换、模型变换、投影变换、视口变换

    产生目标场景的过程类似于用照相机进行拍照: (1) 把照相机固定在三角架上,并让他对准场景从不同位置观察场景(视图变换) gluLookAt (2) 对场景进行安排,使各个物体在照片中的位置是我们所希 ...

  6. Hbase之批量数据写入

    /** * Created by similarface on 16/8/16. */ import java.io.IOException; import org.apache.hadoop.con ...

  7. 网站后台登录aspcms 提示错误号:-2147467259,错误描述:操作必须使用一个可更新的查询。sql=update AspCms_Content set TimeStatus=0 where TimeStatus=1 and Timeing <= 解决方法。

    把data文件夹的权限改下,改成user组可以修改.写入,就好了. 还有一个问题,就是进入后台的时候提示没有访问权限的问题,解决方法看下图

  8. Qt之QSS(黑色炫酷)

    简述 Qt助手中有关于各种部件的QSS详细讲解,资源很丰富,请参考:Qt Style Sheets Examples. 黑色炫酷 - 一款漂亮的QSS风格. 之前博客中分享了很多关于Qt的样式效果,几 ...

  9. WPF:行列显示

    新建显示病人信息控件PatientElement Add-->NewItem-->WPF-->UserControl(WPF),名称:PatientElement.xmal < ...

  10. 初学java之异常类

    //异常类 package st; public class example_1 { public static void main(String args[]) { int n=0,m=0,t=10 ...