CCS float vs clear
有人已经写过了。(*^__^*) 嘻嘻……
为啥我不能写, ( ‵o′)凸
float
首先,HTML的布局是流布局。其元素是分为行内元素和块级元素的。
所谓行内元素就是接着写不会发生换行的元素如<span>,<a>等,其实可以把他们显示为块级元素的,就是大名鼎鼎的display : block;
而所谓的块级元素呢,就是会另起一行绘制的元素,并且它绘制完之后,后面的元素也必须另起一行!真TMD霸气!
唉,你跟我说这个干啥?说float啊!!!
好吧仁兄,马上就说。
float就是为了让一些块级元素显示为行内元素。
唉,费这个劲干嘛啊?
还不是那帮孙子觉得好看造成的!没有办法,拿人钱财替人消灾。
float有none,left和right三种,可能还有inherit,但是一般我也不用。
其实none我也不用哈,因为是默认的啊。
开始说怎么回事儿之前咱们理解个事儿,你说A标签使用了float之后,它会有啥效果呢?
对,答案就是它漂起来了,也就是说脱离了原来的流式布局,但是它只能往上飞(相对于他的父标签而言)
float: left
首先A标签浮起来了,所以A标签后面的元素会往上顶(除非他也飘起来了),但是A标签呢?飘起来之后往左边游,直到碰上父元素的边框或者是碰到另一个漂着的元素。
float: right
同样的道理,只不过它往右漂了。
还有一点,就是流式布局中靠前的漂起来的元素,相对于靠后的漂起来的元素更加靠近float指定的值(left|right)
clear
首先明确一点,clear的作用就是用来消除float的。天生一对冤家(貌似死CSS2在作孽哈)。
clear的影响,它跟float不太像,float除了影响自己之外还会影响后来的元素(我先飞了,你顶上去!)。
clear影响的只有自己。啥意思呢?
假如A标签使用了clear: left。那么它的意思是,老子左边不许有浮动元素!然后他跟HTML一顿急,人家不理他!擦,不管我,老子自己走。然后自己就跑到下一行去了。但是它还是很嚣张的,它会把下一行的元素挤下去。
所以呢,clear有三个备选值,left|right|both。
其含义不言而喻,好吧,不言而喻。
╭︿︿︿╮{/-●●-/} ( (oo) ) ︶︶︶
CCS float vs clear的更多相关文章
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- 89组合margin、padding、float、clear问题
有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...
- 转: CSS中float和clear的理解
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...
- CSS的float与clear
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- float、clear、overflow
浮动: float: none|left|right 作用使得标签失去块级标签的独占一行效果,向某个方向靠拢 标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况 ...
- Css中position、float和clear整理
Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...
- CSS float与clear & 替换元素与非替换元素
css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...
- float和clear
简介 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性. 浮动元素是float值不为none的元素. 可能 ...
- float 和 clear
float 特性1:可以为行内浮动元素设置宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
随机推荐
- 针对无线信道衰落特性分析3G,4G,5G的关键技术异同点
1 无线信道特性对3G系统的影响 2
- Ubuntu Vim 复制到系统粘贴板
/************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...
- toLocaleString
- Sed Regular Expression
Today I also used Sed to do some relatively complex job. So I used regular expression. However, the ...
- Java BigInteger(大数,ACM比赛专用)
用c或者C++处理大数比较麻烦,于是决心学习一下JAVA中大数运算. 先下载一个eclipse,具体的用法去问度娘吧 JAVA中有两个类BigInteger和BigDecimal分别表示大整数类和大浮 ...
- centos 用户组
centos 用户组和用户的添加及所属问题 指定附加组 eg:dy 为组名 ,lisi 为用户,要把lisi 用户添加到 dy 组里面 useradd -G dy lisi 可以同时添加多个组, ...
- phpmyadmin的安装和使用
首先在phpmyadmin的官方网站的下载页面根据自己的PHP以及MYSQL的版本下载对应的phpmyadmin版本. 图中红框部分标识此版本支持度额PHP版本以及MYADL版本. 比如此版本就是支持 ...
- IOS中如果使用RGB实现背景色
在开发的过程中.我们往往会碰到图片很多的情况.这时候我们的程序打包就会变得很大.一些纯色的图片可以用RGB来实现.这样可以减少内存的占用MAC本中有数码测色计这个功能.通过这个我们可以获得图片的RGB ...
- CURL学习和应用
使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并把 ...
- Unity Shader _Time
_Time是个4维向量,跟Unity3D中的deltaTime(这是个一维的,数值)不同. float4 _Time : Time (t/20, t, t*2, t*3), use to animat ...