清除浮动的问题
来源：2-10 清除浮动语法
Leeluo
2019-02-28 15:33:40
一.如下代码，先清除蓝色框浮动后,蓝色框掉在了第二行
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.centent{width:500px;height:500px;border:1px grey solid;}
.red{height:100px;width:100px;background:red;float:right;}
.green{height:100px;width:100px;background:green;float:right;}
.blue{height:100px;width:100px;background:blue;float:right;clear:both;}
</style>
</head>
<body>
<div class="centent">
<div class="red">1242145313454</div>
<div class="green">9999999d489999999</div>
<div class="blue">7</div>
</div>
</body>
</html>
二。再次将绿色框清除浮动后，绿色框怎么排到第二行了？为什么能挤掉蓝色框的位置？
DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.centent{width:500px;height:500px;border:1px grey solid;}
.red{height:100px;width:100px;background:red;float:right;}
.green{height:100px;width:100px;background:green;float:right;clear:both;}
.blue{height:100px;width:100px;background:blue;float:right;clear:both;}
</style>
</head>
<body>
<div class="centent">
<div class="red">1242145313454</div>
<div class="green">9999999d489999999</div>
<div class="blue">7</div>
</div>
</body>
</html>
2回答
-
你好同学 , 首先要理解一下这里清除浮动的作用是清除上一个元素对自身的影响 .
例如给蓝色盒子清除浮动 , 那么它清除的就是它前面的绿色盒子对自身的影响 . 在没有清除浮动的时候 , 蓝色盒子会和绿色盒子在一行浮动 .绿色盒子也会受到红色盒子的影响 ,跟它在一行浮动 ,所以三个盒子都会排列在一起 . 当清除浮动后 , 盒子自然就不会和前面的元素在一起浮动了 ,所以绿色盒子会把蓝色盒子挤到下边哦
根据这个作用 , 盒子都是设置的右浮动 ,所以清除浮动的话直接设置清除右浮动即可 ,如下:
希望对你有帮助 ,祝学习愉快 ,望采纳 .
0h019-02-28 -
好帮手慕夭夭
2019-02-28
你好同学 ,要从html代码结构顺序上看哦 , 绿色盒子在结构中属于第二个元素 , 它上面是红色盒子 ,下面是蓝色盒子 . 它清除浮动后就会排在红色盒子后面 , 然后蓝色盒子是最后一个元素 , 自然被挤到第三行哦 .
祝学习愉快 ,望采纳 .
0
相似问题