Yur*_*ura -1 html css css-float
我有这么简单的代码:
HTML:
<body>
<div id="red"> ABC </div>
<div id="blue"> ABC </div>
</body>
CSS:
body{
width: 300px;
}
#red{
float:left;
width: 100px;
height: 100px;
background-color: red;
}
#blue{
height: 100px;
background-color: blue;
}
我看到旁边的红色方形和蓝色.
但是,如果我添加行"width:100px;" 在#blue中,一切都毁了:"ABC"跳"一条线向下,没有蓝色背景.为什么？
因为另一个div漂浮在它的上方.当你浮动一些东西时,任何未浮动的元素都将使其外部边界成为浮动元素的BEHIND.因此,蓝色框实际上位于红色框之后..但因为红色是块级元素,文本不适合那里,因此它位于红色下面.漂浮两者,它会工作