考虑以下测试用例,其中浮动元素和内联元素放置在一个<fieldset>对比<div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
渲染时,场集是200像素高(它们清除浮点数?),而div只有内联元素高.这种行为的原因是什么,是否有一种解决方法允许字段集的行为与div一样?