第一种方法的原理是什么？不是很能理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
.clear{
clear:both;
}
.container{
width:500px;
/*height:500px;*/
border:2px solid #333;
}
.box01{
width:100px;
height:100px;
background:red;
color:green;
float:left;
}
.box02{
width:100px;
height:100px;
background:orange;
color:green;
float:left;
}
.box03{
width:100px;
height:100px;
background:blue;
color:green;
float:left;
}
.box04{
width:500px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div class="container">
<div class="box01">11111</div>
<div class="box02">22222</div>
<div class="box03">33333</div>
<div class="clear"></div>
</div>
<div class="box04">44444</div>
</body>
</html> 第一种方法的原理是什么？给<div class="clear">添加clear，不是指清除它上一个浮动元素的影响吗？ 所以我是这么来理解的不知道对不对，就这个<div class="clear">不会忽视box01，而是保持块级元素分行，保持在下一行左边不动，所以就把下面的box04也给挤到了下边，所一box04不会异位出现在box01，02，03的下面。 但是我有一个不理解就是为什么三个box会撑起来containner了，clear：both；不是只是清楚上一个元素对自己的影响吗，并不会消除box03的浮动啊，他们应该还是会脱离文档流，那么这里怎么撑开的呢？
正在回答
你好同学 , 你可以这样理解 , 如果<div class="clear"></div>没有设置clear：both . 它上面的三个盒子也没有浮动的情况下 ,<div class="clear"></div>是应该上个盒子后面的 ,但是由于设置了浮动 . 所以<div class="clear"></div>受到浮动元素的影响 , 它的位置就移动上去了 , 如下:
当你设置了clear：both ,这个时候<div class="clear"></div>就能清除浮动元素对它的影响 . 移动到下面来了 , 如下:
这个时候container容器因为<div class="clear"></div>移动到下边 ,就能重新计算高度 , 所以高度就被撑起来了 . 如果还是不理解的话 ,可以给<div class="clear"></div>设置高度理解一下:
以上只是帮助同学去理解 .这种方式我们通常就是叫做清除子元素浮动对父容器带来的影响 .
关于同学的第二个问题 , 老师在第一次回复中讲到了 ,同学可以再结合第一次回复理解一下 . 给box04清除浮动是清除浮动元素对box04的影响 .并没有给container里面设置清除浮动 . 方法一是在container里面设置的清除浮动 . 借助空标签div清除浮动元素对container产生的影响 .box04是因为container有了高度 ,被挤到自己的位置上面的 . 这里同学不要陷进去 . 两个不同的方式清除的效果是不一样的 .
希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .
你好同学 , 把<div class="clear"></div>放在container里面 , 是清除子元素浮动给container带来的影响 . 这样container高度就不会塌陷了 . container高度被撑起来 , 后面的<div class="box04">44444</div>自然就会被挤到下边去了 .
而同学理解的清除对后面元素class="box04">44444</div>的影响 ,是把<div class="clear"></div>放在盒子前面 , 如下:
这样的话是清除对box04的影响 ,而父元素影响是没有清除的 , 效果如下:
所以具体的代码具体的分析 , 把<div class="clear"></div>放在container里面的时候是清除的子元素浮动对父元素带来的影响 . 后面的box4元素只是被container挤下去而已 .
这一块同学再练习并理解一下 . 加油 ! 祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星