Question

给出以下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'的右下角。浏览器渲染'myDiv'而没有浮动段'a'。这就是为什么浏览器仅在段落的节点值后面绘制背景引用为'b'并将其延伸300像素宽，跟随 html头元素的CSS声明。

Answer 1

你可能喜欢这个

<div id="myDiv">
  <p class="a">A<br>A</p>
  <p class="b">B</p>
  <div style="clear:both;"></div>
</div>

应用CSS浮动属性时，重绘其父级的尺寸

1 个答案: