一、为什么要清除浮动
添加浮动的原因是不想让页面局限于标准流式排版（垂直排版），那么当我们想让浮动元素垂直排版时，就要用到清除浮动
二、清除浮动的方法
1.clear:none | left | right | both
clear只作用于自身
让div3和div4左浮动
复习一下浮动的顺序：
div3左浮后脱离标准流，div4向上移，div1、div2、div4组成一个新的标准流，然后div4也脱离标准流左浮，由于div4的上一个元素div3也左浮，所以左浮找左浮跟随在div3后，此时div1和div2组成一个新的标准流。
image.png
那么不想让div4跟随在div3的后面时，我们就可以用clear来清除浮动
.four{
width: 200px;
height: 50px;
background-color: yellow;
float: left;
clear: left;
}
想让div4不跟随在div3后，必须将clear属性设置在div4中，让div4的左边没有浮动元素。若在div4中设置 clear:right；则不起作用
则想给哪个元素清除浮动，clear 就作用在谁身上
image.png
接下来的几种清除浮动的方法，我们将换个全部不设置高度的结构展示
不给任何一个结构设置高度
.box01>ul>li{
background-color: blue;
}
.box02>ul>li{
background-color: red;
}
ul>li{
float: left;
}
<div class="box01">
<ul>
<li>冬瓜</li>
<li>南瓜</li>
<li>西瓜</li>
</ul>
</div>
<div class="box02">
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
image.png
2.未设置高度的结构下使用clear清除浮动
当我们想让红色盒子(box02)不跟随在蓝色盒子(box01)后面时，可以在红色盒子里使用clear属性
.box02>ul{
clear: left;
margin-top: 30px;
}
clear属性的确清除了浮动，但是margin-top属性失效
image.png
对比上一个 当div4添加清除左浮动时，margin-top：20px 是否失效
.four{
width: 200px;
height: 50px;
background-color: yellow;
float: left;
clear: left;
margin-top: 20px;
}
margin-top未失效
image.png
image.png
那为什么ul结构下的margin-top会失效呢？
可以简单理解为：当蓝盒子里的3个li全部浮动后，蓝盒子就脱离了标准流，此时红盒子在浮动之前先执行了margin-top，那么现在红盒子是相对于body margin-top，由之前的知识可知，在父子结构中，当给子元素添加margin-top属性时，若父元素没有设置边框，则父子元素会同时被顶下去（同时往下移）。那么此时只有给body设置边框，红盒子的margin-top才会生效，但是刷新发现没有效果，是因为margin-top的值比已脱离标准流的蓝盒子的高度来的小，继续增大margin-top的值就会出现效果。
没看懂的可以直接点下面的链接，李南江老师用7分钟说的非常明白
https://www.it666.com/course/27/task/306/show
3.给添加清除浮动元素的前一个元素设置高度
给box1蓝色盒子添加高度后，同样清除浮动，且margin-top不会失效
.box01{
height: 20px;
}
.box01>ul>li{
background-color: blue;
}
.box02>ul>li{
background-color: red;
}
.box02>ul{
clear: left;
margin-top: 10px;
}
ul>li{
float: left;
}
image.png
但是在企业开发中，能不加高度就不加高度，所以这个方法不建议采用。
4.内墙法
若A需要清除浮动，在A的上一个元素的最后，添加一个块级元素就可以清除浮动，可以通过设置块级元素的高度达到margin-top的效果
.kong{
height: 20px;
}
<div class="box01">
<ul>
<li>冬瓜</li>
<li>南瓜</li>
<li>西瓜</li>
</ul>
<div class="kong"></div>
</div>
<div class="box02">
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
margin-top不会失效，但是由于需要添加大量无意义的标签, 所以不常用。
5.外墙法
若A需要清除浮动，在A和A的上一个元素之间，添加一个块级元素就可以清除浮动，可以通过设置块级元素的高度达到margin-top的效果
.kong{
height: 20px;
}
<div class="box01">
<ul>
<li>冬瓜</li>
<li>南瓜</li>
<li>西瓜</li>
</ul>
</div>
<div class="kong"></div>
<div class="box02">
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
image.png
和内墙法相同，需要添加大量无意义的标签, 所以不常用。
6.overflow:hidden
给需要清除浮动的A元素的前一个元素添加overflow:hidden就可以清除浮动，且margin-top也不失效
.box01{
overflow: hidden;
}
<div class="box01">
<ul>
<li>冬瓜</li>
<li>南瓜</li>
<li>西瓜</li>
</ul>
</div>
<div class="box02">
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
image.png
7.给前面的盒子添加伪元素来清除浮动
给需要清除浮动的A元素的前一个元素添加伪元素来清除浮动，且margin-top不失效
.box01:after{
/*生成的内容作为box1的最后一个元素，且内容为空*/
content: "";
/*使生成的元素以块级元素显示，占满剩余空间*/
display: block;
/*避免生成的内容破坏原有布局的高度*/
height: 0;
/*使生成的内容不可见*/
visibility: hidden;
/*使生成内容的左右两边都不允许有浮动元素，这一句必须写*/
clear: both;
}
.box01{
/*用于兼容IE*/
*zoom: 1;
}
image.png
总结：
1.clear属性作用于自身，当未设置高度的结构使用clear属性时，margin-top失效
2.内墙法和外墙法都是设置一个额外的块级元素，用设置元素高度的方法达到margin-top的效果，但是设置太多额外的结构对开发是不利的。
3.给需要清除浮动元素的前一个元素添加overflow:hidden，margin-top不失效
3.给需要清除浮动元素的前一个元素添加伪元素清除浮动(clear:both)，margin-top不失效
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论