CSS 为什么要清除浮动与以及清除浮动的应用场景(clear:
2019-11-24 本文已影响0人
CoderZb
为什么清除浮动？:多少情况下，父盒子A是不方便给固定高度的(因为里面的子盒子a1和子盒子a2的内容是动态的,所以自动会把父盒子A撑开，因此不需要给定高度)。而子盒子a1和子盒子a2设置浮动后，子盒子就不占原文档流的位置，就会造成父盒子A高度为0，就影响了下面的标准流盒子(A的兄弟,为B)的布局。
清除浮动的应用场景？:父盒子没有设定高度并且父盒子里面的子盒子设置了浮动(有嵌套关系也是一种前提哦)，这种情况下，如果影响了下面的 相邻的 兄弟盒子的布局，此时要对父盒子设置清除浮动。(注意：如果浮动的盒子C和未浮动的盒子D处于同级，那么C、D最好都设置浮动或者都不设置浮动，否则你是纯属给自己找麻烦玩。因为应用场景是前面那段话(未设定高度+有嵌套关系+嵌套的子盒子设置了浮动))
清除浮动的代码写在哪个标签上？：如果先从B盒子开始布局错乱，就向上寻找和B盒子相邻且同级的A盒子，只需对A盒子增加一个伪类，然后将清除浮动的代码写在这个伪类中。
清除浮动的代码如下：.clearBoth:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearBoth { *zoom: 1; }
标准文档流与清除浮动与的显示效果区别:
image.png
标准文档流写法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除浮动与浮动应用场景</title>
<meta name="description" content="清除浮动与浮动应用场景" />
<meta name="Keywords" content="清除浮动与浮动应用场景" />
</head>
<style type="text/css">
/*清除浏览器默认间距 */
* {
margin: 0;
padding: 0;
text-align: center;
}
.A {
background-color: #4b88cb;
width: 838px;
}
.a1 {
background-color: #fdb409;
width: 245px;
height: 245px;
}
.a2 {
background-color: #e66826;
width: 245px;
height: 245px;
}
.B {
background-color: #949494;
width: 760px;
height: 146px;
}
</style>
<body>
<div class="A ">
<div class="a1">a1</div>
<div class="a2">a2</div>
</div>
<div class="B">B</div>
</body>
</html>
-
标准文档流的效果截图
image.png
浮动写法(没有清除浮动)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除浮动与浮动应用场景</title>
<meta name="description" content="清除浮动与浮动应用场景" />
<meta name="Keywords" content="清除浮动与浮动应用场景" />
</head>
<style type="text/css">
/*清除浏览器默认间距 */
* {
margin: 0;
padding: 0;
text-align: center;
}
.A {
background-color: #4b88cb;
width: 838px;
}
.a1 {
float: left;
background-color: #fdb409;
width: 245px;
height: 245px;
}
.a2 {
float: left;
background-color: #e66826;
width: 245px;
height: 245px;
}
.B {
background-color: #949494;
width: 760px;
height: 146px;
}
</style>
<body>
<div class="A">
<div class="a1">a1</div>
<div class="a2">a2</div>
</div>
<div class="B">B</div>
</body>
</html>
-
没有清除浮动的效果截图
image.png
浮动写法(清除浮动的写法)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除浮动与浮动应用场景</title>
<meta name="description" content="清除浮动与浮动应用场景" />
<meta name="Keywords" content="清除浮动与浮动应用场景" />
</head>
<style type="text/css">
/*清除浏览器默认间距 */
* {
margin: 0;
padding: 0;
text-align: center;
}
.A {
background-color: #4b88cb;
width: 838px;
}
.a1 {
float: left;
background-color: #fdb409;
width: 245px;
height: 245px;
}
.a2 {
float: left;
background-color: #e66826;
width: 245px;
height: 245px;
}
.B {
background-color: #949494;
width: 760px;
height: 146px;
}
.clearBoth:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearBoth {
*zoom: 1;
}
</style>
<body>
<div class="A clearBoth">
<div class="a1">a1</div>
<div class="a2">a2</div>
</div>
<div class="B">B</div>
</body>
</html>
-
清除浮动的效果截图
image.png
