转: 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的定义是后面的可以覆盖前面的.
时间: 2024-08-25 07:32:18

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

CSS中float和Clear的使用

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

css中float属性和position

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

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

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

CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动.但仅仅是如此吗? No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个浮动方向一致的元素使用流式排列,此时要

CSS的float与clear

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

CSS中float专题

float的讲解: 初衷 例子 原理 实现图片文字的环绕效果 通过float,跳出了包裹自己的盒子,合盒子里面没有内容,那么height变为0:那么紧跟着本盒子的其他盒子就会往上移动,但是float后的元素并没有跳出文本流中,任然占有文本流的空间,其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容,(但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距)因此就会出现文字环绕的效果. 如何实现只浮动,盒子高度不为0呢?(清出浮动的影响) p

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

现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/ 2.inline-block方式 ul {text-align:center;font-family:simsun;font-size:14px;} li {display:inline-block;*display:inline;zoom:1;margin-righ

css中position:relative的真正理解

其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的. position属性是用四种定位.默认的是static. position:absolute(绝对定位) --是脱离文档流,相对于父级元素(包含这个position:relative)定位,当然如果没有,那就是相对于body定位的. position:relative(相对定位) --单独使用,

关于CSS中float的两点心得

对一个元素运用float后,该元素将脱离正常文档流,这意味着: 1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的时候就会见缝插针,在该元素留下的一切空白中渲染,这个时候就需要清除浮动.关于清除浮动,首先要明白的是,什么是清除浮动.清除浮动实际上是指,撑开父元素的高度,让后面的元素渲染时,不再见缝插针地跑到它留下的空白中.这有很多现成的解决方法,需要明确的一点是:这些方法有些是作用在浮动元素的父元素上的,有些是