清除浮动
来源:互联网 发布:淘宝网其他账户注册 编辑:程序博客网 时间:2024/05/16 08:30
提到清除浮动我脑海中最先想到的一个问题就是:为什么要清除浮动,既然要清除浮动那么为什么要加浮动,浮动有他必须存在的理由是什么?
浮动是什么?在css中浮动对元素的定位有着不可替代的作用eg:
<div class="box" style="border: 4px solid yellow;width: 200px">
<div class="left" style="background: red;height: 100px;width: 100px"></div>
<div class="middle" style="background: pink;height: 100px;width: 100px"></div>
<div class="right" style="background: blue;height: 100px;width: 100px"></div>
</div>
这个所实现的效果如图;
如果要实现三个不同的颜色in-line,使用float是很方便的事情。
<style>
.box>div{
float: left;
}
</style>
但是随之而来的问题就出现了,高度塌陷问题,虽然float给我们带来很大的方便,同时也使元素脱离了文档流,出现我们不想要的效果。所以清除浮动是必要的。
清除float,解决高度塌陷一般有三种方法:
a:利用overflow: hidden,
b:利用clear:both;
c:利用伪类元素对清除浮动对父元素的影响。
但是这是清除float的方法都个有优缺点。
a>给父元素加一个overflow:hidden;即可,这种清除浮动的方法有一个弊端,如果需要其中一个子元素超出父元素的效果时这种方法就不适合了;
b> clear:both这种方法是在父元素里面加一个非float的块元素,在另加的块元素中加clear:both;这种方法和overflow:hidden;完全可以解决我们开发当中所遇到的高度塌陷的问题。但是这种方法也有缺陷,多加的块元素破坏了代码的语义。
c>给父元素加一个className——clearfix,然后通过伪类元素解决浮动。这种方法我也是刚刚接触,据说是最牛逼的方法。相当于给父元素添加一个虚拟的块元素,然后给块元素加clear:both;这样就解决了b中元素代码语义被破坏的问题。
.clearfix{
*zoom:1;
}
&::before,.&::after{
content: '';
display: block;
}
&::after{
clear:both;
}
不对的地方多谢指正。
清除float后父元素的效果。
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 多个源文件共享一个全局变量
- 泰迪杯数据挖掘挑战赛C题 通用论坛正文提取
- 不差啊,Vultr纽约机房2.5美元月付VPS简单测评
- [JAVA学习笔记-76]volatile的原子性与可见性
- java设计模式之策略模式
- 清除浮动
- 实战gulp
- 卸载Oracle11g的步骤
- RESTful API 设计指南
- Hibernate映射文件中对应的mysql数据库表字段的类型
- 给一次重新选择的机会_您还会选择程序员吗?
- 推荐:搬瓦工/bandwagonhost:KVM VPS,512M内存,年付19.99美元+优惠码
- mtk spi 调试
- 函数式编程