CSS float浮动

最新推荐文章于 2023-04-03 22:59:32 发布

原创最新推荐文章于 2023-04-03 22:59:32 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS的float属性创建浮动布局，并通过clear属性解决浮动元素对后续布局的影响。浮动可以使元素脱离正常文档流，而clear属性则用于指定元素不应与浮动元素相邻的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动不会占用正常的文档流位置：

<body>
<!--正常的文档流是从上到下，使用 float 属性的div 不占文档流-->
<!--使用 clear 属性清除浮动-->
<div style="float: left; width: 100px;height: 200px; background-color: red"></div>
<div style="width: 200px;height: 200px; background-color: greenyellow"></div>
<div style="width: 200px;height: 200px; background-color: blue"></div>

</body>

清除浮动

<body>
<!--正常的文档流是从上到下，使用 float 属性的div 不占文档流-->
<!--使用 clear 属性清除浮动-->
<div style="float: left; width: 100px;height: 150px; background-color: red"></div>

<div style="clear: left"></div>
<div style="width: 150px;height: 150px; background-color: greenyellow"></div>
<div style="width: 150px;height: 150px; background-color: blue"></div>

</body>