清除浮动的问题
一.如下代码，先清除蓝色框浮动后,蓝色框掉在了第二行
<!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>
正在回答
你好同学 , 首先要理解一下这里清除浮动的作用是清除上一个元素对自身的影响 .
例如给蓝色盒子清除浮动 , 那么它清除的就是它前面的绿色盒子对自身的影响 . 在没有清除浮动的时候 , 蓝色盒子会和绿色盒子在一行浮动 .绿色盒子也会受到红色盒子的影响 ,跟它在一行浮动 ,所以三个盒子都会排列在一起 . 当清除浮动后 , 盒子自然就不会和前面的元素在一起浮动了 ,所以绿色盒子会把蓝色盒子挤到下边哦
根据这个作用 , 盒子都是设置的右浮动 ,所以清除浮动的话直接设置清除右浮动即可 ,如下:
希望对你有帮助 ,祝学习愉快 ,望采纳 .
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星