关于float属性究竟对周围元素产生什么样的影响?
下面这个例子 如果给第二个DIV 设置float:left属性,第一个DIV会再下沉20px;并且文字进入第二个div; 而第二个DIV的文字留在原地?
无标题文档
*{ margin:0; padding:0; }
div{ width:300px; height:100px; margin:20px}
.one{ border:2px solid yellow; float:left}
.two{ border:2px solid blue; }
1
22 |
免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。
版权声明:作者保留权利,不代表天盟立场。
|
|
|
|
你搜搜张鑫旭的课吧,float的影响,包裹性,破坏性 |
|
|
|
|
你你用谷歌浏览器调试就看得懂了,浮动一般用在两个或多个div在一个大容器中,你这里的大容器是body,所以两个div重叠, 当你给第二个div容器设置float:left时,第二个div会像body大容器向左靠,因为你设置了div{margin:20px},所以第一个DIV会再下沉20px;受浮动的影响第二个DIV的文字留在原地。
你调试一下,想想你设置的属性会对哪些元素有影响,就懂了。 |
|
|
|
|
兄弟,这是我对浮动影响的理解。首先,div包裹div,子div设置高度,父div不设置高度。子div设置了浮动,想像成漂浮起来了,父div就不再包裹它,父元素没高度宽度,缩成一点。这是对父元素的影响,而对父元素相邻元素的位置(向上移)也发生影响。 |
|
|
|
|
你知道z-index属性吗,它可以定义样式之间的层叠关系,比如属性值是2的会覆盖在1上面。那么设置了float属性的元素就会漂浮在以前平面的上方,相当于z-index属性值相对于以前增加了。 |
|
|
|
|