浮动的<div>框为什么会显示成这个样子_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 09:30:251086검색
<!DOCTYPE html><html><head><style>div.one{ width:350px; border:solid 5px;padding:0px}div.two{ width:50px;border:solid 2px; float: left;}p{border:solid 5px;padding:0px}</style></head><body><div class="one"><p >你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是逼的任务</p><div class="two"> 应该显示在one 框的左上部</div></div></body></html> 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
---------------------------
可是two 框 为什么显示在了 one 框 的外面了
回复讨论(解决方案)
“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。”
----------------------------------------
这句话应该这样理解：如果浮动框上面紧邻的是一个非浮动框，则浮动框 只向左或向右移动，而不向上浮动。如果浮动框上面紧邻的是另一个浮动框，则向上浮动。
你的p标签隔在中间挡住了
我说明一下：先写一个简单的代码
<div> <div class="one"></div> <div class="two"></div></div>
说明：
div是块级元素，默认占整宽。一般来说如果元素浮动，最好定义宽度，否则宽度按照内容变化。
1 如果one不是浮动，two浮动只能在one下方浮动。
2 如果one是浮动，two浮动的位置和宽度有关。two+one宽
子块浮动，父块收缩。。。如此而已。。。。。。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.