清除浮动带来的额外影响
如果对于浮动不熟悉的同学,可以看看介绍float的文章。传送门:CSS float
我们知道,在一个父元素内如果遇到某个浮动元素,此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题,现在已经有了很多的解决方案。针对每一个方案,我们来进行深度的剖析。
添加空块级元素
这种方法比较容易,但是要注意的是这个空元素必须是一个块级元素,不能是行内元素或者是行内块元素。缺点就是多了一些没有意义的标签。代码如下。
//HTML <div class="content"> <div class="float"> </div> <div class="clearfix"></div> //用于清除浮动的元素必须是块级元素 </div> //CSS .content { background:pink;
}
.clearfix { clear: both;
}
.float { width: 50px; height: 50px; float: left; background: tan;
}
之所以可以使用clear属性清除浮动带来的额外影响,还要回归clear属性的本质。
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式