清除浮动
清除浮动
盒子高度问题
- 在标准流中内容的高度可以撑起盒子的高度
- 在浮动流中浮动元素内容的高不可以撑起盒子的高
清除浮动方式一
- 给前面的父盒子添加高度
- 注意点:在企业开发中能不写高度就不写高度, 所以这种方式不常用
清除浮动方式二
- 利用clear:both;属性清除前面浮动元素对我的影响
- 注意点:使用clear:both之后margin-top属性会失效, 所以不常用
清除浮动方式三
- 在两个有浮动子元素的盒子之间添加一个额外的块级元素
- 注意点:在外墙法中可以通过设置额外标签的高度来实现margin效果搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用
清除浮动方式四
- 在前面一个盒子的最后添加一个额外的块级元素
- 注意点:外墙法会自动撑起盒子的高度, 所以可以直接设置margin属性，和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离
清除浮动方式五
- 给前面一个盒子添加overflow:hidden属性
- 注意点:由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性，IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
清除浮动方式六
- 给前面的盒子添加伪元素来清除浮动
- 示例代码
html
<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>
- 注意点:本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素；添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性；CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西
