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) )  ︶︶︶ 

时间: 2024-10-24 01:07:48

CCS float vs clear的相关文章

CSS中float和Clear的使用

CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向. CSS中Float和Clear属性用法 实现多栏排版的最好方法是使用float属性,float也是一个将使你受益匪浅的属性.一个float对象可以居左或居右,一个设置为float的对象,将根据设置的

89组合margin、padding、float、clear问题

有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-bottom:/*距离底边距*/margin-left:/*距离左边距*/:数值排列4-1,比方说margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一样,左右一样*/margin:10px 20px;/*上下10px 左右20p

CSS px, em, 和rem; float以及clear(第一篇学习)

px:相对长度,相对于屏幕分辨率: em:相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.  任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em

CSS float与clear &amp; 替换元素与非替换元素

css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容.如 input标签,根据type显示内容.img标签,根据src显示内容.textarea.select.object都是替换元素. 非替换元素:内容直接告诉浏览器,浏览器将其显示出来.内容为标签包裹的内容. 块级元素与内联元素,在设置float之后,元素会变成块级元素. float是令本身元素脱离

float 浮动 clear:both清除浮动 ,绝对定位,相对定位

<1> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/c

CSS学习笔记-浮动(float,clear)

float float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 属性值: left    元素向左浮动. right   元素向右浮动. none    默认值.元素不浮动,并会显示在其

转: CSS中float和clear的理解

float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">11111</div><div style="width:150px">2222</div> 这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的

Css中position、float和clear整理

Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom&

CSS的float与clear

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div. 小菜认为,无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 显然标准流已经无法满足需求,这就要用到浮动.        浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 例如