如何解决为什么普通流元素不能容纳浮点元素?
我的理解是,当你将“float:left”属性设置为一个HTML元素时,基本上会发生以下步骤:
在这个例子中:
index.html:
<html>
<head></head>
<body>
<div id="BoxBlue"></div>
<div id="BoxGreen"></div>
</body>
</html>
style.css:
div{
width:100px;
height:100px;
border:8px solid #333;
}
#BoxBlue{
background-color:blue;
float:left;
}
#BoxGreen {
background-color:green;
}
如果在蓝色框中我放置了属性“float:left”,为什么绿色框 没有“适应”蓝色,而是放在一边而不是 被蓝色覆盖?
在这里你可以更直观地看到我说的话: https://codepen.io/correocontenedor/pen/rNWxXGo
解决方法
当你浮动元素时,意味着它会向这个方向浮动并与其他元素重叠。在这种情况下,您没有添加额外的 CSS 来使它们适应,但针对您的情况的一个简单修复是将 display:inline-block
添加到 #boxGreen
这将使它们适应。这将并排显示元素
div{
width:100px;
height:100px;
border:8px solid #333;
}
#boxBlue{
background-color:blue;
float:left;
}
#boxGreen {
background-color:green;
display: inline-block;
}
<div id="boxBlue">
</div>
<div id="boxGreen">
</div>
.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。