转: CSS中float和clear的理解
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的理解的更多相关文章
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- CSS的float与clear
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
- 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...
- 解决CSS中float:left后需要clear:both清空
现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- css中float left与float right的使用说明
转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...
- css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
随机推荐
- iOS 设置button中图文位置
方法一. -(CGRect)imageRectForContentRect:(CGRect)contentRect { return CGRectMake(self.width - kImage ...
- linux学习笔记2-命令总结2
权限管理命令 chmod 其他权限管理名 chgrp chown umask ========================================================= ...
- Linux输入子系统(转)
Linux输入子系统(Input Subsystem) 1.1.input子系统概述 输入设备(如按键,键盘,触摸屏,鼠标等)是典型的字符设备,其一般的工作机制是低层在按键,触摸等动作发生时产生一个中 ...
- 手动导出Excel方法
private void dgJiBingZhenDuanBind() { Response.Clear(); Response.Charset = "GB2312"; Res ...
- epoll中et+多线程模式中很重要的EPOLL_ONESHOT实验
因为et模式需要循环读取,但是在读取过程中,如果有新的事件到达,很可能触发了其他线程来处理这个socket,那就乱了. EPOLL_ONESHOT就是用来避免这种情况.注意在一个线程处理完一个sock ...
- android 回调函数的使用
// activity 之间方法调用的桥梁 public class ActivityCallBridge { static ActivityCallBridge mBridge; private O ...
- jquery mobile 学习总结
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- Hbase之缓存扫描加快读取速度
import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...
- (转)TCP、UDP、IP协议
原文地址:http://blog.chinaunix.net/uid-26833883-id-3627644.html 互连网早期的时候,主机间的互连使用的是NCP协议.这种协议本身有很多缺陷,如 ...
- 如何使用java调用DLL运行C++(初篇)
JNI:Java Native Interface,简称JNI,是Java平台的一部分,可用于让Java和其他语言编写的代码进行交互. 下面是从网上摘取的JNI工作示意图: