关于css清除浮动
来源:互联网 发布:微商发图软件 编辑:程序博客网 时间:2024/05/02 05:53
原文地址:http://www.cnblogs.com/iloveyoucc/archive/2012/09/17/2688726.html
div+css中clear用法
一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯。
clear属性值有四个clear:both|left|right|none;
作用:该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
clear:left;表示该元素左边不存在浮动元素;
clear:right;表示该元素右边不存在浮动元素;
clear:both;表示该元素两边都不存浮动元素;
clear:none表示两边允许有浮动元素。
下边是套用网友的一个例子
clear:both;
有css定义:
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}
则:
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >另起一行</p>
以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档 流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清 除。
所以我们应改为:
如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个<P>加一个清除浮动。
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p style="clear:both;">另起一行</p>
上面的这个博文很好的解释了利用空标签法<div class="clear"></div>来清除浮动的原理;
2.利用伪元素来清除浮动:
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
clear: both;
}
.clearfix {
zoom: 1; /* ie6 */
}
<div class="father clearfix">
<div class="child1"></div>
<div class="child2"></div>
</div>
3.小米和淘宝网站的写法:推荐去小米网站上学习一些css写法等,网站比较漂亮而且有很多css3的效果;
4、关于BFC:
BFC是独立渲染的一块区域,该区域不会影响外面的元素;
哪些情况会生成BFC?
这就是经常使用给父元素添加overflow: hidden;来清除浮动的原因;
上面的例子<div class="father">可以给
.father{
overflow: hidden; /* 创建BFC区域 */
}
来达到清除浮动;
- 关于css清除浮动
- 关于css的清除浮动
- [css]关于浮动与清除浮动
- CSS-浮动&清除浮动
- CSS之关于clearfix--清除浮动
- CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 闲聊CSS之关于clearfix--清除浮动
- 关于css清除浮动原理解析
- 关于css清除浮动的方法
- CSS浮动和清除浮动
- css浮动与清除浮动
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- css浮动及清除浮动
- css浮动和清除浮动
- Android之MediaRecoder录制视频
- Python元组学习笔记
- 列表
- javascript对象
- 【剑指offer】如何通过先序遍历与中序遍历重建二叉树
- 关于css清除浮动
- 为什么我在css中设定的背景图片在浏览的时候不显示?
- 01背包
- Hello CSDN
- ViewDragHelper简单使用
- TimesTen 数据库复制学习:13. 设置复制系统
- 初学者如何查阅自然语言处理(NLP)领域学术资料
- mac Certifying GDB
- Vue.js学习 Item1 --快速入门