清除浮动
盒子高度问题
-
在标准流中内容的高度可以撑起盒子的高度（父元素div被撑起来）
<style>
div{
background-color: red;
}
p{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
-
在浮动流中浮动元素内容的高不可以撑起盒子的高（父元素红色背景的div并没有被撑起来）
<style>
div{
background-color: red;
}
p{
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
清除浮动方式⑴
给前面的父盒子添加高度——
在企业开发中能不写高度就不写高度, 所以这种方式 不推荐 。
【 添加高度前 】
【 添加高度后】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*这里*/
height: 50px;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑵
利用clear:both;属性清除前面浮动元素对我的影响 ——
margin属性会失效, 所以这个方式也 不推荐 。
【 添加 clear:both; 前 】
【 添加 clear:both;后 及时css中已经设置margin 但未生效 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*这里*/
clear: both;
/*margin无效*/
margin-top: 30px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑶
在两个有浮动子元素的盒子之间添加一个额外的块级元素 （外墙法） ——
- 在外墙法中可以通过设置额外标签的高度来实现margin效果；
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以 不推荐 。
【 添加额外块级元素前 】
【 添加额外块级元素后 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*这里*/
.wall{
clear: both;
}
.h20{
/*利用额外块级元素实现margin*/
height: 20px;
background-color: deepskyblue;
}
</style>
<div class="box1">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<!--这里-->
<div class="wall h20"></div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑷
在前面一个盒子的最后添加一个额外的块级元素 （内墙法） ——
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性；
- 和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。所以依然 不推荐 。
【 添加额外块级元素前 】
【 添加额外块级元素后 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*这里*/
.wall{
clear: both;
}
</style>
<div class="box1">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
<!--这里-->
<div class="wall"></div>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑸
给前面的盒子添加 overflow:hidden属性 ——
缺点是和定位结合在一起使用时会有冲突
- overflow:hidden的作用是清除溢出盒子边框外的内容；
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个zoom:1；
【 添加overflow:hidden;前 】
【 添加overflow:hidden;后 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*这里*/
overflow: hidden;
*zoom:1;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑹
给前面的盒子添加伪元素来清除浮动（推荐用法） ——
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素；
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性。
【 添加伪元素前 】
【 添加伪元素后 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*这里*/
.clearfix:after {
/*生成内容作为最后一个元素*/
content: "";
/*使生成的元素以块级元素显示,占满剩余空间*/
display: block;
/*避免生成内容破坏原有布局的高度*/
height: 0;
/*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
visibility: hidden;
/*重点是这一句*/
clear: both;
}
.clearfix {
/*用于兼容IE, 触发IE hasLayout*/
*zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
清除浮动方式⑺
给前面的盒子添加双伪元素来清除浮动（推荐用法） ——
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。
【 添加伪元素前 】
【 添加伪元素后 】
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*这里*/
.cf:before,.cf:after {
content:"";
display:table;
/*重点是这一句*/
clear:both;
}
.cf {
zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>伊利丹</li>
<li>瓦斯琪</li>
<li>凯尔萨斯</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>安度因</li>
<li>瓦莉拉</li>
<li>拉希奥</li>
</ul>
</div>
