2 okyoung188 okyoung188 于 2016.09.24 16:52 提问

form中div设置浮动,div元素会向左浮动到哪个元素为止??

html:

<div class="bj_bai">
            <h3 id="login_caption">登录</h3>
            <form action method="get">
                <input type="text" class="kuang_txt" placeholder="登录名">
                <input type="password" class="kuang_txt" placeholder="密码">
                <div>
                    <input class="" type="checkbox"/>
                    <span>记住我&nbsp;&nbsp;&nbsp;</span>
                    <a href="">忘记密码?</a>
                </div>
                <input type="button" class="btn_zhuce" value="登录">
            </form>
        </div>
CSS:

.bj_bai{
    float: left;
    width: 314px;
    height: 408px;
    padding-left: 50px;
    background: #FFF;


}

.kuang_txt{
    width: 230px;
    height: 60px;
    border: 1px solid #dddddd;
    background: #faffbd;/*背景色*/
    color: #b1a9a9;/*应该是密码的颜色*/
    margin-bottom: 30px;
    line-height: 60px;/*行内块状元素可设置行高*/
    padding-left: 4px;
}
 .zhuce_kuang .zc .bj_bai div {
    float: left;
    width: 100%;
    line-height: 43px;
}

.zhuce_kuang .zc .bj_bai .btn_zhuce {
    width: 227px;
    height: 33px;
    background: #37b5f9;
    font-size: 14px;
    line-height: 33px;
    text-align: center;
    border: 0px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}

图片说明
图片说明
两种假设:
1.如果包含框是form,那么div浮动应该盖住用户名输入框;
2.如果包含框成了外部的div块,应该盖住登录标题的;
我的感觉:
1.如果”登录“按钮宽度设置小一点的情况下,似乎div块脱离标准文档流,并且脱离form块,后面的块直接跟上向前;
2.如果”登录“按钮宽度设置大一点的情况下,”登录“按钮可以显示在div下面,似乎div块未脱离文档流,还处在form块中。
所以感觉自己糊涂了,现在搞不清楚到底form中div设置浮动,div元素会向左浮动到哪个元素为止,遵从哪些原则?
不知哪位大神能帮我解答一下,感激不尽~

2个回答

qq_29594393
qq_29594393   Ds   Rxr 2016.09.24 18:22

div元素会向左浮动到另一个浮动的元素或者是碰壁,也就是靠边,但是如果空间不够的话,就会倒下一行来

qq_29594393
qq_29594393 回复okyoung188: 碰到边,或者碰到另一个浮动的元素就停了,你的困惑是为什么按钮变小会上去,那是因为它和文档流在同一层次,一样占空间,空间不够,自然会下来,然后按照浮动的规则,找另一个浮动的元素,找到了,那好,就停着了,没找到那就碰壁了(靠边停)换行的原因是上面太挤,宝宝受不了委屈所以下来,
接近 2 年之前 回复
okyoung188
okyoung188 因为form没有设置浮动,处在div前面的元素也没设置浮动,那么现在就是碰壁的情况,也就是说只要他碰到边,同时他的前方有非浮动元素,就不再往上一行浮动了?
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.09.25 11:59
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
DIV+CSS关于浮动跑到上面的原因
今天,遇到了一个问题就是div地底部莫名其妙的跑到上面去了。 无标题文档 body{ text-align:center;} .top{ width:960px; height:100px; background-color:#003300; margin:0 auto;} .main{ margin:0 auto; width:960px;} .a{ float:left;
div在父级元素中浮动定位
如果要让一个div呈现浮动在父级div中的情况,可以将父级div的定位设置为“relative”,将需要浮动覆盖的dv定位为“absolute”,再定位left、top等数据。这样该div会无视其他同级div的布局,在父级div中呈现绝对位置。 ’fixed‘定位让div相对于浏览器窗口的绝对定位,实现在浏览器窗口中固定div的位置,使其不管网页滚动条的变化,始终在浏览器窗口中某一位置固定。
Div 浮动到另一个div之上:
Div 浮动到另一个div之上: 绝对定位相对定位 .fj1 { position: absolute; width: 150px; height: 150px; border: 1px solid #000; b
三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去?
因为第三个div块是写在第二个div块下面的,而且第二个div块的位置正常,没有浮动,它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。就好像假如你的第一个向左浮动的div是写在第二个div下面,它也是不可能占到第二个蓝色的位置上去的。左边的元素左浮动,当浮动出中间内容区域范围之后,打印就看不到左边的了,可以直接用固定定位fixed给他定位住, 右边的只能使用左f...
html css控制浮动元素居中显示
基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> --> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>欲实现效果: 浮动元素居中的出现
css中div等块元素左右浮动代码测试
改变body块中div块元素的class=s1.s2.s3中  float:left;和float:right;的值来观察实际效果。 代码如下: 巫溪美食网开版倒计时   body{   margin:15px;   font-family:Arial;   font-size:12px; } .father{   border:10px solid
子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度
一次又一次 http://www.divcss5.com/jiqiao/j612.shtml
div浮动到img上面
此时需要在外层有一个position的div, 如果没有,可以在外面加一层。 而在div与img的样式中加入绝对定位。 并且在div中加入z-index为2, img的z-index为1, 并且div为opacity为0.8 此时的div与img为兄弟元素,img也算是一种容器,所以一般是会流式摆放,加入绝对定位后,便可以重叠。 一般重叠的需要设定Z-index与opacity
div css float浮动用法(left right)
在学习牛腩老师的视频中,很深刻的体会了浮动带来的效果的震撼,现在是对B/S这块的知识是越来越喜欢,越来越愿意学习,特别是现在看网页的时候看到那些代码感觉很是熟悉,特别亲切,只是下面自己又通过网站的学习和大家通过分享。   div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动学习 Css样式的float浮动属性,用于设置标签对象(如:标
为什么元素浮动之后,文字会环绕在周边,而不是跟浮动元素重合?
最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。 为了彻底明白这个问题,必须先弄明白几个问题。