css清除浮动的集中方法
2024-08-25 09:01:53
一：浮动产生的副作用
1.父元素的背景不能显示
2.父元素的边框不能撑开
3.padding和margin失效
二：清除浮动的方法
1.给父元素设置高度：这样可以清除浮动，但是子元素内容高度不固定，这种方法就不合适
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
css样式：
.outer{
width:400px;
height:400px;
background-color:#e4393c;
border:1px solid #ccc;
}
.inner1{
width:100px;
height:100px;
float:left:
}
.inner2{
width:100px;
height:100px;
float:left:
}
2.使用clear:both;可以实现清除浮动，在最后一个子元素上加上clear:both;
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
.outer{
width:400px;
height:400px;
background-color:#e4393c;
border:1px solid #ccc;
}
.inner1{
width:100px;
height:100px;
float:left:
}
.inner2{
width:100px;
height:100px;
float:left:
}
.inner3{
clear:both;
}
3.给父元素添加overflow:hidden/auto;可以清除浮动
.outer{
overflow:hidden;
}
4. :after的方法，最好的方法
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
/*清除浮动*/
.clearfix{
display:inline-table;
display:block;
zoom:1;
}
.clearfix:after{
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
.clearfix:after, .clear:before{
display:table;
content:'';
line-height:0;
}
在需要清除浮动的地方加上这个class就行
最新文章
- 纯CSS照片墙
- 7月10日——[HouseStark] 扬帆起航--第一次会议
- 用Redis构建分布式锁-RedLock(真分布)
- MFC中CString转化为char*
- C#设计模式-1、适配器模式（Adapter Pattern）（转载）
- 再论EM算法的收敛性和K-Means的收敛性
- 使用Hint来优化执行计划
- js 正则 数值验证
- 标准I/O库之临时文件
- 分布式消息系统jafka快速起步（转）
- linux文章(11)---umask和chmod
- win7旗舰版安装IIS
- qtp type和set方法的区别
- 2. spring定时任务
- 安装FrameWork后重新注册IIS
- linux中，使用cat、head、tail命令显示文件指定行
- node编译C++，比如安装node-gyp失败的问题
- MySQL5.7 GTID 浅析
- 微擎 人人商城 merchant.php源码
- Sort-242. Valid Anagram