clear

最新推荐文章于 2021-05-14 00:52:59 发布

挨踢的小胖

最新推荐文章于 2021-05-14 00:52:59 发布

阅读量597

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/i792439187/article/details/8826714

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在DIV+CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。

图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equivmetahttp-equiv="Content-Type"

content="text/html;charset=utf-8"/>

<title>无标题文档</title>

<style type="text/css">

.LeftText

{

margin:3px;

float:left;

height:180px;

width:170px;

border:1pxsolid#B1D1CE;

background-color:#F3F3F3;

}

.FootText

{

height:180px;

}

.Clear

{

clear:both;

}

</style>

</head>

<body>

<div class="LeftText">区块1</div>

<div class="LeftText">区块2</div>

<div class="Clear"></div>

<div class="FootText">区块3</div>

</body>

</html>