应用 CSS 浮动属性时，会重新绘制其父级的尺寸
给出以下 HTML 代码：
<html>
<body>
<head>
<style>
#myDiv{
background:orange;
width:300px;
}
.a{
margin:5px;
background:purple;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="a">A<br>A</p>
<p class="b">B</p>
</div>
</body>
</html>
为什么当我将 float:right 添加到 .a 时，myDiv 缩小了？
您同意我的回答吗？
因为CSS浮动是定位属性。该段 引用为“a”的位置带有浮动 CSS 属性，并且 脱离 div 'myDiv' 的流程。这就是为什么'a'元素 位于 div 'myDiv' 的右角。浏览器 呈现没有浮动段落“a”的“myDiv”。这就是为什么 浏览器只在该段落的节点值后面绘制背景 引用为“b”并将其拉伸 300 像素宽，遵循 html head 元素的 CSS 声明。
Given the following HTML code:
<html>
<body>
<head>
<style>
#myDiv{
background:orange;
width:300px;
}
.a{
margin:5px;
background:purple;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="a">A<br>A</p>
<p class="b">B</p>
</div>
</body>
</html>
Why is it that when I add float:right to .a, the myDiv shrinks?
Would you agree with my answer?
Because CSS floats are positioning properties. The paragraph
referenced to as 'a' is positioned with a float CSS property and
breaks out of the flow of the div 'myDiv'. That's why the 'a' element
is positioned at the right corner of the div 'myDiv'. The browser
renders 'myDiv' without the floating paragraph 'a'. That is why the
browser only draws a background behind the node value of the paragraph
referenced to as 'b' and stretches it 300 pixels wide, following the
CSS declaration of the html head element.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你可能会喜欢这个
you may like this