Rumah > Artikel > hujung hadapan web > 浮动的<div>框为什么会显示成这个样子_html/css_WEB-ITnose
浮动的<div>框为什么会显示成这个样子_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 09:30:251050semak imbas
<!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宽
子块浮动，父块收缩。。。如此而已。。。。。。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：怎么让li的那个点靠近文字一点呢？_html/css_WEB-ITnoseArtikel seterusnya：导航栏的问题_html/css_WEB-ITnose