为了账号安全,请及时绑定邮箱和手机立即绑定

关于float属性究竟对周围元素产生什么样的影响?

关于float属性究竟对周围元素产生什么样的影响?

夜月见黑 2016-08-11 11:53:21
下面这个例子 如果给第二个DIV 设置float:left属性,第一个DIV会再下沉20px;并且文字进入第二个div; 而第二个DIV的文字留在原地?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{ margin:0; padding:0; }div{ width:300px; height:100px; margin:20px}.one{ border:2px solid yellow; float:left}.two{ border:2px solid blue; }</style></head><body><div class="one">1</div><div class="two">22</div></body></html>
查看完整描述

7 回答

?
nickylau82

TA贡献128条经验 获得超67个赞

你搜搜张鑫旭的课吧,float的影响,包裹性,破坏性

查看完整回答
1 反对 回复 2016-08-11
?
qyy2499760117_叶子

TA贡献188条经验 获得超91个赞

你你用谷歌浏览器调试就看得懂了,浮动一般用在两个或多个div在一个大容器中,你这里的大容器是body,所以两个div重叠, 当你给第二个div容器设置float:left时,第二个div会像body大容器向左靠,因为你设置了div {margin:20px},所以第一个DIV会再下沉20px; 受浮动的影响第二个DIV的文字留在原地。

你调试一下,想想你设置的属性会对哪些元素有影响,就懂了。

查看完整回答
反对 回复 2016-08-11
?
chwech

TA贡献63条经验 获得超18个赞

兄弟,这是我对浮动影响的理解。首先,div包裹div,子div设置高度,父div不设置高度。子div设置了浮动,想像成漂浮起来了,父div就不再包裹它,父元素没高度宽度,缩成一点。这是对父元素的影响,而对父元素相邻元素的位置(向上移)也发生影响。

查看完整回答
反对 回复 2016-08-11
?
o_n

TA贡献56条经验 获得超20个赞

你知道z-index属性吗,它可以定义样式之间的层叠关系,比如属性值是2的会覆盖在1上面。那么设置了float属性的元素就会漂浮在以前平面的上方,相当于z-index属性值相对于以前增加了。

查看完整回答
反对 回复 2016-08-11
  • 夜月见黑
    夜月见黑
    什么元素都可以任意设置z-index 属性?
  • o_n
    o_n
    z-index就是网页的z轴,用相对定位绝对定位把两个层重叠在一起,z-index的值越大,就越靠上,注意,z-index没有单位,z-index:5;几乎都可以设置吧
  • 夜月见黑
    夜月见黑
    多谢指点
  • 7 回答
  • 0 关注
  • 3499 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信