浮动的<div>框为什么会显示成这个样子_html/css

浮动的<div>框为什么会显示成这个样子_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:30:25

Original

1050 people have browsed it

<!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>

Copy after login

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
---------------------------
可是two 框为什么显示在了 one 框的外面了

回复讨论(解决方案)

“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。”
----------------------------------------
这句话应该这样理解：如果浮动框上面紧邻的是一个非浮动框，则浮动框只向左或向右移动，而不向上浮动。如果浮动框上面紧邻的是另一个浮动框，则向上浮动。

你的p标签隔在中间挡住了

我说明一下：先写一个简单的代码

<div>  <div class="one"></div>  <div class="two"></div></div>

Copy after login

说明：
div是块级元素，默认占整宽。一般来说如果元素浮动，最好定义宽度，否则宽度按照内容变化。
1 如果one不是浮动，two浮动只能在one下方浮动。
2 如果one是浮动，two浮动的位置和宽度有关。two+one宽

子块浮动，父块收缩。。。如此而已。。。。。。