P41-前端基础-clear解决受浮动元素的影响而改变位置
【摘要】
P41-前端基础-clear解决浮动元素的影响而改变位置
1.概述
问题描述
使用块元素设计页面布局，当A块元素设置浮动后，离开了文档流。相邻的块元素B受浮动的影响会改变原有的位置，移动到A...
P41-前端基础-clear解决浮动元素的影响而改变位置
1.概述
问题描述
- 使用块元素设计页面布局，当A块元素设置浮动后，离开了文档流。相邻的块元素B受浮动的影响会改变原有的位置，移动到A元素位置。
解决方案
- clear就是用来解决某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
2.clear介绍
clear
- 作用：清除浮动元素对当前元素所产生的影响
可选值：- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除两侧中最大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
div {
font-size: 30px;
}
.box1 {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
float: right;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
/*
由于box1的浮动，导致box3位置上移
也就是box3收到了box1浮动的影响，位置发生了改变
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
- 作用：清除浮动元素对当前元素所产生的影响
- 可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其他元素的影响
*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
3.clear效果预览
3.1.块3没有设置clear效果
3.2.块3设置clear效果
文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。
原文链接：brucelong.blog.csdn.net/article/details/112908607
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）