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

下面这个例子如果给第二个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>

夜月见黑

浏览 3548回答 7

7回答

nickylau82

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

qyy2499760117_叶子

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

chwech

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

o_n

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

随时随地看视频慕课网APP