css清除浮动clearfix:after的用法详解(附完整代码)
来源:互联网 发布:梁洛施 知乎 编辑:程序博客网 时间:2024/05/19 14:18
如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开
网上常用的完整代码:
如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开。
解决方法:
CSS代码:
以下是详细解释:
首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。
<div >
<div style="float:left"></div>
</div>
这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例:一般而言 ,有三种方式清除浮动
。第一:让外层元素也浮动,例如:
<div style="float:left" >
<div style="float:left"></div>
</div>
然后 再此元素之外 的元素上添加clear:both效果。
第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。
具体用法:
<div style="clearfix" >
<div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。
第三:利用 overflow属性
<div style="overflow:hidden" >
<div style="float:left"></div>
</div>
阅读全文
0 0
- css清除浮动clearfix:after的用法详解(附完整代码)
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- css中clearfix清除浮动的用法
- 【css】清除浮动(clearfix 和 clear)的用法
- css中clearfix的用法(清除浮动)
- CSS 之 清除浮动.clearFix:after
- 清除浮动的用法clearfix
- css 清除浮动 clearfix
- CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器
- 浅谈CSS清除浮动(ClearFix)的方法
- 详解 清除浮动 的多种方式(clearfix)
- 清除浮动(clearfix)
- 清除浮动(clearfix)
- [zz]CSS clearfix 清除浮动
- css之clearfix清除浮动
- css用clearfix清除浮动
- 启动eclipse报错 Could not create the Java Virtual Machine
- 数学实验(matlab)
- POJ 2548 Subway 笔记
- 单例模式C++实现
- 统计学习方法笔记1--统计学习方法概论
- css清除浮动clearfix:after的用法详解(附完整代码)
- hdu—1002
- POJ 1050 To the Max
- 解决jpgraph在php7.0版本下时,无法显示例子图表的问题
- Debug:This kind of launch is configured to openthe debug perspective when it suspends
- Redis禁用flushAll,flushDb,keys命令
- machine learning key word (part one)
- 用户名密码正确,在登陆界面循环的问题centos7
- 两个有序链表的合并(递归)