三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去?

第一个和第三个都是浮起来的和第二个 不在一个平面阿 第三个怎么上不去呢,我看教程说让第二个占了,可是他们不在一个平面 应该不影响第三个的阿
我的意思是我不明白为什么第三个上不去。怎么解决这个我知道

因为第三个div块是写在第二个div块下面的,而且第二个div块的位置正常,没有浮动,它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。

就好像假如你的第一个向左浮动的div是写在第二个div下面,它也是不可能占到第二个蓝色的位置上去的。
<div style=" " ></div> // 这个不浮动的块是不会被下面的浮动改变的
<div style="float:left;"></div>

希望这样你能理解。
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-12-06

你是要达到上面那个效果么?下面是源码,估计是第三个div没设置margin-top才出问题的

<style type="text/css">
    #div1
    {
        background-color:#FF0000;
        width:100px;
        height:100px;
        float:left;
    }
    #div2
    {
        background-color:#FFFF00;
        width:150px;
        height:150px;
    }
    #div3
    {
        background-color:#33FF33;
        width:250px;
        height:250px;
        float:right;
        margin-top:-150px;
    }
</style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>    
    <div id="div3"></div>
</body>

追问

我知道,我的意思是我不明白为什么第三个上不去 不在一个平面不是不互相影响的吗。为什么上不去呢

追答

你第二个没设置绝对布局(position:absolute)就会有影响吧

第2个回答  2014-01-20

同是新手,,我刚刚也是这种情况。

解决方法:

把绿色DIV的代码放到三个DIV代码排序第一个设置右浮动就可以了。


<div style=" float:right; width:300px; height:300px; background-color:#006633"></div>

<div style="float:left; width:300px; height:300px; background-color:#003399"></div>

<div style="float:left; width:300px; height:200px; background-color:#990000;"></div>


第3个回答  2013-12-08
第一个元素设置了左浮动,它照常浮动了,并且脱离了文档流,第二个元素并没有浮动,所以他无视了第一个浮动元素,进行覆盖,但是第一个浮动元素的z-index大于0,所以会出现反而覆盖了第二个元素,第三个元素是设置右浮动,它周围并没有浮动元素,它不知道根据哪个元素进行对准,你可以把第二个元素当做一个清除浮动元素,所以第三个元素会按照右浮动进行浮动
第4个回答  2014-12-29
第一个左浮动,脱离了文档流。 而第二个没脱离,即还是块状元素,会独占一行,这时你改动的是第三个,肯定不能和第二个还是块状元素的在一行。

三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去...
因为第三个div块是写在第二个div块下面的,而且第二个div块的位置正常,没有浮动,它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。就好像假如你的第一个向左浮动的div是写在第二个div下面,它也是不可能占到第二个蓝色的位置上去的。<div style=" " ><\/div...

为什么HTML多个左浮动后放置一个右浮动上不去?
因为float的使用原理 浮动元素会生成一个块级框,float是将生成的块级框,在一行上从左向右罗列,假如在一行之上剩余的空间比要浮动的元素的宽度窄,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。你的写法生成的页面如下图:跟是左浮动还是右浮动没有关系。

为什么向右浮动的DIV块上不去
是这个右浮动的div宽度太多了 要么调整宽度 要么给这个div加个clear:both;

html中一个框分成三个框,前两个框都是浮动左,第三个是浮动右,但我在D...
你在头部加上这句样式,加上文字就错位,那就是你外层的div宽度不够,以至于里面的div自动换行。而你这儿的width设置没有超出,那么要么是内边距(padding),要么就边(border),最后就是外边距(margin);

float带来的问题
2.浮动造成换行问题 描述:例子如:两个div设置了左浮动,想第三个div换行 (如果第三个也是左浮动,则宽度小于父元素剩余宽度的话,就不会换行;如果第三不是浮动等特殊情况,会覆盖第一个div位置,但文字不会覆盖而是环绕)解决:给第三div设置style="clear:both"3.浮动会造成 父元素塌陷 问题。...

网页代码写完,右边浮动元素为何不与上2个平行,反而在下面一行?
主要问题在你的Main 层上 这个层不具有浮动属性 会默认占满 left在第一个位置 左浮动,然后会引发 下一个层 main 与left在一行 main没浮动 那自然 right层只能在下一行去了

css 3个div,第一个向左浮动后,第三个把第二个覆盖了
第一个和第二个div设置左浮动就可以了,因为div是块级元素,要设置浮动才能同一行

【html】设置元素浮动之后第二行的div块为什么不自动向上浮动呢??
按道理它也不是会向上的。例子:你浮动中,有一个为250高的,那么那一排就按250来,而且,向左浮动的意思,只是说紧跟着上一个,如果像你所说的,向上了,那它就不止浮云这么简单了,那就叫错位了。比如:<div>1<\/div><div>2<\/div><div>3<\/div><div>4<\/div><div>5<\/div>,不管1234...

css中水平并列有三个div块元素,左边的div给了左浮动,可为什么左边哪个没...
这个你可以使用浏览器的审查元素看一下这个div是否有margin-left 等属性,看这个div的父元素是否又或者一些元素的默认值等

为什么div右浮动后还会换行,div浮动换行
因为你又浮动的那个div的上一个元素或者里面的内容没有左浮动或者定位或者width设置过大,留给又浮动的元素的位置不够,右边的位置被占据或者占据了部分,所以导致你元素有浮动会出现换行

相似回答
大家正在搜