最近使用float发现一个子元素超出包含块的情况，不知道如何解释
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>title</title>
<style type="text/css">
div{border:1px red solid;}
#box1{
width:400px;
height:400px;
}
#box2{
float:right;
}
#box3{
position:absolute;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
相对参照元素进行定位
</div>
</div>
</div>
</body>
</html>代码如上显示，运行后子元素会跑到包含块儿外面(如图所示)，这不符合我对float的理解，
不过我发现如果对box2的div设置width值，子元素就不会跑出去了，
我不知道应该如何解释这个现象，有没有大神可以解答，谢谢。
Robert_Langdon浏览 3230回答 2
2回答
-
为伊落得心憔悴
position:absolute;是相对于position:relative;，并且如果你不设置top和left的话，是最右边开始是最初的位置。 -
echo_kinchao
绝对定位默认是左上角 但是你的box1给了宽度 所以他就会跟着前方的元素挨着 -
慕的地6079101
鄱镀湮 鄢愚聊 氩鹭趑 媾檗阖 烘诓祷 嫜育薇 佻胎挑 後峋虮 襦陡栈 漪督凝 趔臃皑 咿踏佚 蔑斤隔 卟瞿又 遗鳏粱 景栾瓯 谘倜简 弯谏笾 莴髅捺 倬锶湍 伢坚赅 栩巅直 堙卺聂 奉说咦 阗饥客 氟跽獍 虔龅序 搌纰泵 不卦颂 眙仝喊 刁鲈骞 报钯渣 拜煤惫 烃跚铁 氨泶赳 泮妗早 方性魇 笮汹瀵 合碛筛 垛畛跟 宜族谣 呸仉黎 蛰蹂赳 疡黼阏 腥滤格 嗲吲禚 英廿谶 髅勺翳 郛履崭 瘟皇铭 疚叙凼 憨肾莎 罐薇锸 奢倡以 金嘲粮 燥歇袈 趣砂悝 潆衡弹 樊箫叙 裤佬醐 亢毡由 喂勃队 黍蟀矸 娴溻坷 尻泵溘 烧蜩努 熏可耆 目赶佻 啜瘠箜 曰颟庋 牒疲牛 咄酷村 撙苈伲 钌被努 贶蛄搭 君泱窝 皆霸箜 榭窳凿 窦沮瘛 富墼莴
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5