DIV+CSS清除浮动方法
一、为什么要清除浮动?
1》父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来)
2》因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱。
二、常见的几种清除浮动方法
1》给没有浮动的子元素的CSS添加 clear: both;或新增加一个空的子元素,并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高,从而达到清除浮动的效果。(关键字:未浮动子元素添加clear:both;)
2》子元素全部浮动时,给父元素的CSS添加 overflow: hidden;*(当父元素用了定位时,这种方法就失去效果了,所以不推荐使用!!!)
3》单位元素标签法:在样式表中写下述代码,给其父元素添加class 为 clearfix 的类(如果是在使用bootstrapt,则可以直接添加clearfix不用写下述代码)
.clearfix:after{
display: block;
content: '';
height: 0;
visibility: hidden;
overflow: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}
4》双伪元素标签法 在样式表中写下述代码,给其父元素添加class 为 clearfix 的类 !!推荐
.clearfix:after,.clearfix:before{
content:'''';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
三、总结
还有许多种清除浮动的方法,但是不推荐使用,在正常情况下,使用第三种或第四种方法就可以了。
最新文章
- C++ exception
- “SSLError: The read operation timed out” when using pip
- 单元测试-代码覆盖率工具 -- JaCoCo
- 解决oracle11g安装导致数据库无法自动搜集统计信息-转
- JSP 页面打印
- maven 本地仓库nexus的安装
- Android 自学之绝对布局 AbsoluteLayout
- sBPM产品介绍
- Nagios+pnp4nagios+rrdtool 安装配置nagios被监控端NRPE配置(二)
- HTTP真的很简单(转)
- 如何给grldr.mbr和grldr改名
- IP设置
- Vue页面Demo
- springBoot系列教程01:elasticsearch的集成及使用
- .NET微服务 容器化.NET应用架构指南(支持.NET Core2)
- Java第7次实验提纲(多线程)
- <;自动化测试方案_8>;第八章、手机端UI自动化测试
- Django提交表单时遇到403错误:CSRF verification failed
- php中获取当前时间
- 常用Common集合