清除浮动的四种方式
前言：如果这篇文章对你有帮助，请不要吝啬你的赞。😃
浮动是什么
CSS 的 Float（浮动），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。
浮动元素的特征：
-
浮动的元素会脱离文档流 -
浮动的元素会紧挨在一起 -
浮动元素具有类似行内块元素的特性。所以行内元素有了浮动，不再需要转换为块级或行内块级元素元素 -
收缩。浮动的元素，如果没有设置width，会自动收缩为内容的宽度。比如块级盒子，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，会收缩成内容的宽度
<style>
div[class^="box"] {
width: 300px;
height: 300px;
background-color: pink;
margin: 10px;
}
div[class^="box"]>div {
height: 200px;
background-color: purple;
}
div[class^="box"]>span {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box1>div {
float: left;
}
.box1>span {
float: left;
}
</style>
<div class="box1">
<div>浮动div</div>
<span>浮动span</span>
</div>
<div class="box2">
<div>不浮动div</div>
<span>不浮动span</span>
</div>
浮动导致的问题1
浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
html
<div class="container">
<div class="box1 float">box1</div>
<div class="box2 float">box2</div>
</div>
<div class="box3">box3</div>
css
[class^='box'] {
width: 200px;
height: 200px;
color: #fff;
}
.box1 {
background-color: rgb(160, 3, 3);
}
.box2 {
background-color: rgb(11, 11, 133);
}
.box3 {
height: 300px;
background-color: rgb(85, 7, 85);
}
.float {
float: left;
}
实际上box3确实有300px，只是box1浮起来了，所以，box3有200px在box1下，设置box1的 opacity为0即可看出来。
浮动导致的问题2
<style>
li {
float: left;
width: 40px;
height: 20px;
background-color: pink;
border-bottom: 2px solid purple;
list-style: none;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
想要的效果：
实际效果：
**原因： div没有高度，不能给浮动的子元素一个容器，所以第二个 div的li就紧贴到第一个 div中最后的一个 li去了 **
清除浮动
清除浮动是为了清除使用浮动产生的影响。
1. 浮动元素的祖先元素添加高度
很少用
.container {
height: 200px;
}
2. 额外标签法
在浮动元素后使用一个空元素，并携带 clear: both属性。(当然，也可以是 left、 right值)，就是both，会把所有情况的浮动都清掉。
问题：
html
<!-- 初级版：外墙板。第一个div(container)的margin-bottom失效了 -->
<div class="container">
<div class="box1 float">box1</div>
<div class="box2 float">box2</div>
</div>
<div class="clear"></div>
<div class="box3">box3</div>
<!-- 升级版：内墙版 -->
<div class="container">
<div class="box1 float">box1</div>
<div class="box2 float">box2</div>
<div class="clear"></div>
</div>
<div class="box3">box3</div>
css
.clear {
clear: both;
}
效果同上
3. overflow法
给浮动元素的元素添加 overflow: hidden或 overflow: auto清除浮动。
.container {
overflow: hidden;
}
效果如上图所示。
4. after伪元素法
IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题(个人倒是感觉没啥意义，IE6版本也太老了吧，这都得兼容的话，更何况这年头，还真不知道谁还用IE)
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素清除浮动。
<div class="container clearfix">
<div class="box1 float">box1</div>
<div class="box2 float">box2</div>
</div>
<div class="box3">box3</div>
.clearfix {
/* 兼容IE6、7，个人觉得大可不必(乱说的) */
zoom: 1;
}
.clearfix::after {
content: '';
/*因为clear对块级元素有效，伪元素:before和:after添加的内容默认是inline元素*/
display: block;
/* 清除浮动 */
clear: both;
/*不显示该区域，content为空，实际可省略*/
visibility: hidden;
}
效果如上图所示。
实际上，下面的代码就足够了
.clearfix:before {
content: '';
display: block;
clear: both;
}
5. 双伪元素法
.clearfix:after,
.clearfix:before {
content: '';
display: block;
clear: both;
}
原理就和上面一样
原文始发于微信公众号（赤蓝紫）：清除浮动的四种方式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/45202.html
