方法一, 在结尾处添加空 div 标签 clear:both
在浮动的盒子之下再放一个标签, 在这个标签中使用 clear:both, 来清除浮动对页面的影响.
注意: 一般情况下不会使用这一种方式来清除浮动. 因为这种清除浮动的方式会增加页面的标签, 造成结构的混乱.
- <div class="box">
- <div class="red">1</div>
- <div class="sienna">2</div>
- <div class="blue">3</div>
- <div class="clear"></div>
- </div>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
方法二, 父级 div 定义 overflow: auto
原理: 使用 overflow 属性来清除浮动有一点需要注意, overflow 属性共有三个属性值: hidden,auto,visible. 我们可以使用 hiddent 和 auto 值来清除浮动, 但切记不能使用 visible 值
- <div class="box over-flow">
- <div class="red">1</div>
- <div class="sienna">2</div>
- <div class="blue">3</div>
- </div>
方法三, 使用伪元素来清除浮动 (:after, 注意: 作用于浮动元素的父亲)
- (注: 主要推荐该方法)
- .clearfix:after{
- content:"";/* 设置内容为空 */
- clear:both;/* 清除浮动 */
- display:block;/* 将文本转为块级元素 */
- height:0;/* 高度为 0*/
- visibility:hidden;/* 将元素隐藏 */
- }
- .clearfix{
- zoom:1;/* 为了兼容 IE*/
- }
- end~~~
来源: http://www.jianshu.com/p/06e5796a85cc