关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果。又或者它会很容易地影响到别的元素和属性。所以今天打算尝试一下float的各种设置,看看效果。在这篇博客里做个总结。

1. 设置float后对后面元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            border:1px solid red;
            width:50px;
            height:50px;
            float: left;
        }
        .div2{
            background: green;
            widows: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

效果:

也就是说前面浮动元素会位于后续的非浮动元素的上方,确实是脱离了文档流。这大概就是“浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。”的意思吧。

而另一方面,如果把两个元素调换次序,则效果为:

这时候div1是浮动元素,会被上面的元素顶下来。即使改变div2的宽度,也依然如此。

但是这时候如果把div2设置为position:absolute的话,div1就会浮动上去,说明position也是脱离标准流的,互不干涉。

而设置了position:absolute属性的元素会覆盖接下来的浮动元素。

2. float和position的相互影响

如果在float上设置position:absolute的话,会覆盖float的属性。就不是浮动了。float失效

在float上设置position:relative的话,如果设置left/top/right/bottom等属性,则元素会先浮动到相应位置,然后再根据top/left/bottom/right所设置的距离发生偏移

在float上设置margin属性也是有效的。

参考:

对CSS中的Position、Float属性的一些深入探讨

经验分享:CSS浮动(float,clear)通俗讲解

时间: 2024-11-05 02:19:06

关于css中float的理解的相关文章

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 left与float right的使用说明

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

简要的谈一谈我对CSS中长度单位的理解

CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是CSS中定义的绝对长度单位,他们都是在我们实际生活中用的很多,但是在写CSS代码制作要在屏幕上显示的网页的时候,这种绝对长度单位用到的很少,我能想到的比较有用的地方只有给印刷品设置长度单位时可能会用到,虽然我没有接触过. 接下来就是相对长度单位,相对,顾名思义就是以某个长度作为参照,设置的相对长度的

CSS中float专题

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

转: 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中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中float的两点心得

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

css中继承的理解

1.css继承的概念,可以参照面向对象中的继承(如java中三大特性中的继承) 2.子类继承父类,子类就拥有了父类的一些性质(颜色.字体大小.对齐方式) 3.子类也可以有自己的特性: 比如说, a.标题标签<H1~H6>中默认有控制字体大小的[css{font-size : 2em},即字体大小为父类字体大小的2倍](也就是说继承并修改了父类的字体大小) b.超连接<a>标签也有自己的默认颜色,在继承了父类的颜色之后,又使用了自己的默认颜色(由自己的默认颜色来定夺) 4.总结,这些