gpt4 book ai didi

html - 应用 CSS float 属性时,会重绘其父级的尺寸

转载 作者:行者123 更新时间:2023-11-28 15:36:40 25 4
gpt4 key购买 nike

给定以下 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>

为什么当我在 .a 中添加 float:right 时,myDiv 会缩小?

你同意我的回答吗?

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.

最佳答案

你可能喜欢这个

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

关于html - 应用 CSS float 属性时,会重绘其父级的尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7800504/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com