您的位置：首页 > Web前端 > HTML

HTML中为什么要清除浮动的个人理解

2015-07-11 16:38 861 查看

HTML中元素可分为两类：

1、块元素

2、行元素

块元素标签通常独占一行，排列为上下排列，例如div标签。

行元素标签则体现为不独占一行，排列为并排排列，例如strong标签。

举个例子，假如我们需要将行元素强行转换令其可并排排列，于是我们需要将所要的元素变为浮动型（float）。用水槽原理。我们可将元素视为一个可漂浮物品，从水下按照顺序依次上浮，float:left可以视为物体需要上浮后往左移动，同理float:right可以视为上浮后元素需要往右移动，这里我们定义两个浮动元素：

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>浮动元素对比</title>

<style>

.box1 {

width: 200px;

height: 200px;

float: left;

}

.box2 {

width: 200px;

height: 40px;

float: left;

}

</style>

</head>

<body>

<div class="box1">浮动元素1</div>

<div class="box2">浮动元素2</div>

<div>文档</div>

</body>

</html>

运行结果如下：



我们可以看到运行结果中，“文档”元素并没有按照div的特性另外单独占一行，而是直接靠着浮动元素列出。由此例子可看出浮动元素的浮动性质会对其他元素造成影响，此时我们需要清除浮动，才能去除浮动对后面的元素影响。

我们可以在将body内改为：

<body>

<div class="box1">浮动元素1</div>

<div class="box2">浮动元素2</div>

<div style="clear:left"></div>

<div>文档</div>

</body>

运行后可以看到结果：



此时非浮动元素则正常显示。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航